Merge pull request #511 from WestpacGEL/505-gel-design-system-docs-re…

…sponsive-resizing-of-buttons fixes #505
WestpacGEL · Dec 8, 2023 · ea4d6b5 · ea4d6b5 · vercel · Dec 8, 2023
2 parents 0d61449 + 0e5ac7f
commit ea4d6b5
Showing 1 changed file with 22 additions and 28 deletions.
diff --git a/apps/site/src/components/component-blocks/icons/icons.component.tsx b/apps/site/src/components/component-blocks/icons/icons.component.tsx
@@ -34,34 +34,28 @@ export const Icons = () => {
 
   return (
     <form action="/api/assets" method="POST">
-      <div className="mb-4 bg-light p-4">
-        <Grid>
-          <Item span={{ initial: 12, sm: 6 }}>
-            <div className="flex flex-col items-start sm:flex-row sm:items-center">
-              <label className="mb-2 mr-[1rem] sm:mb-0" htmlFor="filter-icons">
-                Filter by name
-              </label>
-              <Input id="filter-icon" value={search} onChange={handleOnChange} className="w-full" />
-            </div>
-          </Item>
-          <Item span={{ initial: 12, sm: 3 }}>
-            <div className="flex flex-col items-start sm:flex-row sm:items-center">
-              <label className="mb-2 mr-[1rem] sm:mb-0" htmlFor="icon-look">
-                Look
-              </label>
-              <Select id="icon-look" value={look} onChange={handleLookChange} className="w-full sm:w-fit">
-                <option value="filled">Filled</option>
-                <option value="outlined">Outlined</option>
-              </Select>
-            </div>
-          </Item>
-          <Item span={{ initial: 12, sm: 3 }}>
-            <input type="hidden" name="asset" value="icon" />
-            <Button look="primary" iconBefore={AllIcons.DownloadIcon} soft type="submit">
-              Download all SVGs
-            </Button>
-          </Item>
-        </Grid>
+      <div className="mb-4 flex flex-wrap gap-3 bg-light p-4 align-bottom">
+        <div className="flex w-full shrink-0 grow flex-col items-start sm:w-auto sm:flex-row sm:items-center">
+          <label className="mb-2 mr-[1rem] sm:mb-0" htmlFor="filter-icons">
+            Filter by name
+          </label>
+          <Input id="filter-icon" value={search} onChange={handleOnChange} className="w-full" />
+        </div>
+        <div className="flex w-full flex-col items-start xsl:w-auto sm:flex-row sm:items-center">
+          <label className="mb-2 mr-[1rem] sm:mb-0" htmlFor="icon-look">
+            Look
+          </label>
+          <Select id="icon-look" value={look} onChange={handleLookChange} className="w-full sm:w-fit">
+            <option value="filled">Filled</option>
+            <option value="outlined">Outlined</option>
+          </Select>
+        </div>
+        <div className="flex w-full items-end sm:w-auto">
+          <input type="hidden" name="asset" value="icon" />
+          <Button look="primary" iconBefore={AllIcons.DownloadIcon} soft type="submit">
+            Download all SVGs
+          </Button>
+        </div>
       </div>
       <Grid>
         <Item span={12}>