Fix spacing and size, add max height

jpmorganchase · Nov 13, 2024 · 72e7a20 · 72e7a20
1 parent 2a03834
commit 72e7a20
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/site/src/components/country-symbol-preview/CountrySymbolPreview.tsx b/site/src/components/country-symbol-preview/CountrySymbolPreview.tsx
@@ -51,8 +51,10 @@ export const CountrySymbolPreview = () => {
               key={countryCode}
             >
               <LazyCountrySymbol code={countryCode} size={1} />
-              <Text>{countryCode}</Text>
-              <Text style={{ textAlign: "center" }}>{countryName}</Text>
+              <StackLayout gap={0} align="center">
+                <Text>{countryCode}</Text>
+                <Text style={{ textAlign: "center" }}>{countryName}</Text>
+              </StackLayout>
             </StackLayout>
           ))}
         </FlowLayout>

diff --git a/site/src/components/icon-preview/IconPreview.module.css b/site/src/components/icon-preview/IconPreview.module.css
@@ -16,6 +16,11 @@
   flex: 1;
 }
 
+.gridContainer {
+  max-height: 800px;
+  overflow: auto;
+}
+
 .iconCard {
   padding-top: var(--salt-spacing-300);
   padding-inline: var(--salt-spacing-25);

diff --git a/site/src/components/icon-preview/IconPreview.tsx b/site/src/components/icon-preview/IconPreview.tsx
@@ -56,27 +56,29 @@ export function IconPreview() {
   const renderIcons = useMemo(() => {
     if (filteredIcons.length > 0) {
       return (
-        <FlowLayout justify="start" gap={1}>
-          {filteredIcons.map(([name, Icon]) => (
-            <StackLayout
-              align="center"
-              key={name}
-              gap={1}
-              className={styles.iconCard}
-            >
-              <div className={styles.iconContainer}>
-                <Icon size={1} />
-              </div>
-              <Text
-                className={styles.iconName}
-                color="secondary"
-                styleAs="label"
+        <div className={styles.gridContainer}>
+          <FlowLayout justify="start" gap={1}>
+            {filteredIcons.map(([name, Icon]) => (
+              <StackLayout
+                align="center"
+                key={name}
+                gap={1}
+                className={styles.iconCard}
               >
-                {name.replace(/([A-Z])/g, " $1")}
-              </Text>
-            </StackLayout>
-          ))}
-        </FlowLayout>
+                <div className={styles.iconContainer}>
+                  <Icon size={2} />
+                </div>
+                <Text
+                  className={styles.iconName}
+                  color="secondary"
+                  styleAs="label"
+                >
+                  {name.replace(/([A-Z])/g, " $1")}
+                </Text>
+              </StackLayout>
+            ))}
+          </FlowLayout>
+        </div>
       );
     }
     return (