app: Mobile grid improvements

src/components/IconGrid/IconGrid.css

@@ -46,6 +46,24 @@
   text-align: center;
 }
 
+@media screen and (max-width: 536px) {
+  .grid-container {
+    padding: 32px 8px;
+  }
+
+  .grid-item {
+    width: 108px;
+    height: unset;
+    padding: 4px 0;
+    justify-content: flex-start;
+    border: 2px solid transparent;
+  }
+
+  .grid-item p {
+    padding: 0 4px;
+  }
+}
+
 .info-box {
   position: relative;
   display: flex;
@@ -64,6 +82,10 @@
   .icon-usage {
     padding-left: 10% !important;
   }
+
+  .snippet pre {
+    padding: 12px 8px 12px 20px;
+  }
 }
 
 .icon-preview {

src/hooks/useGridSpans.ts

@@ -1,13 +1,18 @@
 import { useWindowSize } from "react-use";
 
+const MOBILE_BREAKPOINT = 536;
+
 const GRID_PADDING = 32; // .grid-container { padding }
 const TOOLBAR_WIDTH = 17; // IS THIS BROWSER-SPECIFIC?
 const MAX_GRID_WIDTH = 1120; // .grid { max-width }
 const ITEM_WIDTH = 168; // .grid-item { width; height; margin }
+const ITEM_WIDTH_MOBILE = 108; // .grid-item { width; height; margin }
 
 export default (): number => {
   const { width } = useWindowSize();
+  const itemWidth = width <= MOBILE_BREAKPOINT ? ITEM_WIDTH_MOBILE : ITEM_WIDTH;
+
   return Math.floor(
-    Math.min(width - GRID_PADDING - TOOLBAR_WIDTH, MAX_GRID_WIDTH) / ITEM_WIDTH
+    Math.min(width - GRID_PADDING - TOOLBAR_WIDTH, MAX_GRID_WIDTH) / itemWidth
   );
 };

src/lib/icons.ts

@@ -6393,12 +6393,12 @@ export const icons: ReadonlyArray<IconEntry> = [
     tags: ["attachments", "mail", "email", "office"],
     Icon: Icons.PaperclipHorizontal,
   },
-  {
+  // {
-    name: "party-hat",
+  //   name: "party-hat",
-    categories: [IconCategory.OBJECT],
+  //   categories: [IconCategory.OBJECT],
-    tags: ["*new*", "birthday", "celebration", "event"],
+  //   tags: ["*new*", "birthday", "celebration", "event"],
-    Icon: Icons.PartyHat,
+  //   Icon: Icons.PartyHat,
-  },
+  // },
   // {
   //   name: "password",
   //   categories: [IconCategory.SYSTEM],