Merge pull request #2626 from AbhiVarde/fix-2599-mobile-form-layouts

fix: responsive form layouts, developer toolkit, and thread card overflow on mobile

Author: Meldiron

src/routes/(marketing)/(components)/developers-toolkit.svelte

@@ -52,17 +52,19 @@
         </p>
     </div>
 
-    <div class="mt-6 flex flex-wrap items-center justify-center gap-0">
+    <div
+        class="mt-6 flex flex-col items-center justify-center gap-2 lg:flex-row lg:flex-wrap lg:gap-0"
+    >
         <!-- Build group -->
         <div
-            class="text-primary flex h-10 items-center gap-4 rounded-full border border-dashed border-black/8 bg-white p-1 text-sm"
+            class="text-primary flex h-10 w-full items-center gap-4 rounded-full border border-dashed border-black/8 bg-white p-1 text-sm lg:w-auto"
         >
             <span class="text-eyebrow text-secondary font-aeonik-fono ml-3 uppercase">Build</span>
             <div class="flex h-full w-full justify-between gap-2">
                 {#each build as product}
                     <a
                         href={product.href}
-                        class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-3 backdrop-blur-lg transition-opacity"
+                        class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-0.5 backdrop-blur-lg transition-opacity sm:px-1 md:px-2 lg:px-3"
                     >
                         <span
                             class="text-primary text-caption flex items-center justify-center gap-1 font-medium"
@@ -73,16 +75,15 @@
                                 alt={product.label}
                                 class="size-6"
                             />
-                            {product.label}
+                            <span class="hidden lg:inline">{product.label}</span>
                         </span>
                     </a>
                 {/each}
             </div>
         </div>
-        <!-- dashed gap between groups (horizontal) -->
         <div
             aria-hidden="true"
-            class="mx-0 h-px w-6 self-center border-t border-dashed border-black/8"
+            class="mx-0 hidden h-px w-6 self-center border-t border-dashed border-black/8 lg:block"
         ></div>
         <!-- Deploy group -->
         <div
@@ -93,7 +94,7 @@
                 {#each deploy as product}
                     <a
                         href={product.href}
-                        class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-3 backdrop-blur-lg transition-opacity"
+                        class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-0.5 backdrop-blur-lg transition-opacity sm:px-1 md:px-2 lg:px-3"
                     >
                         <span
                             class="text-primary text-caption flex items-center justify-center gap-1 font-medium"
@@ -104,7 +105,7 @@
                                 alt={product.label}
                                 class="size-6"
                             />
-                            {product.label}
+                            <span class="hidden lg:inline">{product.label}</span>
                         </span>
                     </a>
                 {/each}

src/routes/contact-us/+page.svelte

@@ -142,7 +142,7 @@
                             <form
                                 method="post"
                                 on:submit|preventDefault={handleSubmit}
-                                class="flex flex-col gap-4"
+                                class="mx-auto flex w-full max-w-xl flex-col gap-4"
                             >
                                 <div class="flex justify-end">
                                     <ul
@@ -192,7 +192,7 @@
                                     </ul>
                                 </div>
                                 <div
-                                    class="web-u-flex-vertical-reverse-mobile flex justify-between gap-4"
+                                    class="web-u-flex-vertical-reverse-mobile mx-auto flex w-full max-w-xl justify-between gap-4"
                                 >
                                     <p class="text-caption web-u-max-width-380">
                                         {#if error}
@@ -210,7 +210,7 @@
                                     <Button
                                         type="submit"
                                         disabled={submitting}
-                                        class="web-u-inline-width-100-percent-mobile-break1 self-center"
+                                        class="w-full! self-center lg:w-auto!"
                                     >
                                         <span>Submit</span>
                                     </Button>

src/routes/startups/+page.svelte

@@ -316,7 +316,7 @@
         <CaseStudiesLight />
 
         <div id="form" class="web-white-section light overflow-hidden">
-            <div class=" relative pt-20 pb-8 md:pt-40 md:pb-30">
+            <div class="relative pt-20 pb-8 md:pt-40 md:pb-30">
                 <div class="relative">
                     <div class="relative container">
                         <!-- before submit -->
@@ -402,7 +402,7 @@
                                 <form
                                     method="post"
                                     on:submit|preventDefault={handleSubmit}
-                                    class="flex flex-col gap-4"
+                                    class="mx-auto flex w-full max-w-xl flex-col gap-4"
                                 >
                                     <div class="flex justify-end">
                                         <ul
@@ -458,11 +458,12 @@
                                         </ul>
                                     </div>
                                     <div
-                                        class="web-u-flex-vertical-reverse-mobile flex justify-between gap-4"
+                                        class="web-u-flex-vertical-reverse-mobile mx-auto flex w-full max-w-xl justify-between gap-4"
                                     >
                                         <div class="flex flex-col gap-2">
                                             <p class="text-caption text-secondary">
                                                 This form is protected by reCAPTCHA, and the Google <br
+                                                    class="hidden sm:block"
                                                 />
                                                 <a
                                                     href="https://policies.google.com/privacy"
@@ -484,7 +485,7 @@
                                         <Button
                                             type="submit"
                                             disabled={submitting}
-                                            class="web-u-inline-width-100-percent-mobile-break1 self-center"
+                                            class="w-full! self-center lg:w-auto!"
                                         >
                                             Get Started
                                         </Button>

src/routes/threads/ThreadCard.svelte

@@ -11,9 +11,9 @@
 
 {#key highlightTerms}
     <a href="/threads/{thread.discord_id}" class="web-card is-normal has-border-gradient thread">
-        <div class="flex gap-2">
+        <div class="flex min-w-0 gap-2">
             <h3
-                class="text-main-body text-primary font-medium break-words"
+                class="text-main-body text-primary min-w-0 flex-1 font-medium"
                 use:highlight={highlightTerms}
             >
                 {thread.title}
@@ -22,23 +22,23 @@
         </div>
 
         <p
-            class="web-main-body-500 u-margin-block-start-4 u-break-word"
+            class="web-main-body-500 u-margin-block-start-4 u-break-word min-w-0"
             use:highlight={highlightTerms}
         >
             {sanitizeContent(thread.content)}
         </p>
 
-        <div class="mt-4 flex justify-between gap-4">
-            <ul class="flex gap-2">
-                {#each thread.tags ?? [] as tag}
-                    <li>
-                        <div class="web-tag">{tag}</div>
+        <div class="mt-4 flex min-w-0 flex-wrap justify-between gap-4">
+            <ul class="flex min-w-0 flex-wrap gap-2">
+                {#each thread.tags ?? [] as tag, index (tag + index)}
+                    <li class="min-w-0">
+                        <div class="web-tag truncate">{tag}</div>
                     </li>
                 {/each}
             </ul>
 
             <div
-                class="web-icon-button is-more-content web-u-pointer-events-none flex items-center"
+                class="web-icon-button is-more-content web-u-pointer-events-none flex shrink-0 items-center"
                 aria-label="Replies"
             >
                 <span class="web-icon-message web-u-font-size-16" aria-hidden="true"></span>
@@ -51,13 +51,25 @@
 <style lang="scss">
     .web-card {
         padding: 1.25rem;
+        overflow: hidden;
     }
 
     .thread {
         position: relative;
+        max-width: 100%;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
 
-        p: {
+        p {
             overflow-wrap: break-word;
+            word-wrap: break-word;
+            hyphens: auto;
+        }
+
+        h3 {
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            hyphens: auto;
         }
     }
 
@@ -68,4 +80,11 @@
     h3 {
         margin-block-end: 0.25rem;
     }
+
+    .web-tag {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 </style>