diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css index 7435d313..fb61f4af 100644 --- a/src/components/IconGrid/IconGrid.css +++ b/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 { diff --git a/src/hooks/useGridSpans.ts b/src/hooks/useGridSpans.ts index cd5f36f0..e65e604d 100644 --- a/src/hooks/useGridSpans.ts +++ b/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 ); }; diff --git a/src/lib/icons.ts b/src/lib/icons.ts index 5f0abcf2..a9ab0b30 100644 --- a/src/lib/icons.ts +++ b/src/lib/icons.ts @@ -6393,12 +6393,12 @@ export const icons: ReadonlyArray = [ tags: ["attachments", "mail", "email", "office"], Icon: Icons.PaperclipHorizontal, }, - { - name: "party-hat", - categories: [IconCategory.OBJECT], - tags: ["*new*", "birthday", "celebration", "event"], - Icon: Icons.PartyHat, - }, + // { + // name: "party-hat", + // categories: [IconCategory.OBJECT], + // tags: ["*new*", "birthday", "celebration", "event"], + // Icon: Icons.PartyHat, + // }, // { // name: "password", // categories: [IconCategory.SYSTEM],