fix: improve layout preview density

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css

@@ -15,17 +15,44 @@
 .grid {
   display: grid;
   gap: 3px;
-  grid-auto-rows: clamp(0.65rem, 1.7vw, 1.15rem);
+  grid-auto-rows: clamp(1.35rem, 2.2vw, 1.75rem);
   min-height: 2.5rem;
 }
 
 .tile {
+  container-type: inline-size;
   min-width: 0;
   overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--mantine-primary-color-filled) 24%, var(--mantine-color-default-border));
   border-radius: calc(var(--mantine-radius-sm) * 0.75);
   background: color-mix(in srgb, var(--mantine-primary-color-light) 70%, var(--mantine-color-body));
-  padding-inline: 0.3rem;
+  padding-inline: 0.25rem;
+}
+
+.tileContent {
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.tileLabel {
+  display: none;
+  min-width: 0;
+  max-height: 2.1em;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  line-height: 1.05;
+}
+
+@container (min-width: 9rem) {
+  .tileContent {
+    justify-content: flex-start;
+  }
+
+  .tileLabel {
+    display: block;
+  }
 }
 
 .dynamicTile {

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx

@@ -58,7 +58,7 @@ export const LayoutPreview = ({ board, layout, layouts, sourceLayout, apps }: Pr
               return (
                 <Stack key={section.id} gap={4} className={classes.section}>
                   {section.kind === "category" && (
-                    <Text size="xs" fw={600} truncate>
+                    <Text size="xs" fw={600}>
                       {section.name}
                     </Text>
                   )}
@@ -85,32 +85,33 @@ export const LayoutPreview = ({ board, layout, layouts, sourceLayout, apps }: Pr
 
                       return (
                         <Tooltip key={`${element.type}-${element.id}`} label={label} openDelay={350}>
-                          <Group
-                            gap={4}
-                            wrap="nowrap"
-                            align="center"
+                          <Box
+                            role="img"
+                            aria-label={label}
                             className={`${classes.tile} ${element.type === "section" ? classes.dynamicTile : ""}`}
                             style={{
                               gridColumn: `${element.xOffset + 1} / span ${element.width}`,
                               gridRow: `${element.yOffset + 1} / span ${element.height}`,
                             }}
                           >
-                            <ThemeIcon size="sm" variant="light" radius="sm" style={{ flexShrink: 0 }}>
-                              {app ? (
-                                <MaskedOrNormalImage
-                                  imageUrl={app.iconUrl}
-                                  hasColor={false}
-                                  alt=""
-                                  className={classes.appIcon}
-                                />
-                              ) : (
-                                <WidgetIcon size={13} stroke={1.7} />
-                              )}
-                            </ThemeIcon>
-                            <Text size="xs" fw={500} truncate>
-                              {label}
-                            </Text>
-                          </Group>
+                            <Group gap={4} wrap="nowrap" className={classes.tileContent}>
+                              <ThemeIcon size="sm" variant="light" radius="sm" style={{ flexShrink: 0 }}>
+                                {app ? (
+                                  <MaskedOrNormalImage
+                                    imageUrl={app.iconUrl}
+                                    hasColor={false}
+                                    alt=""
+                                    className={classes.appIcon}
+                                  />
+                                ) : (
+                                  <WidgetIcon size={13} stroke={1.7} />
+                                )}
+                              </ThemeIcon>
+                              <Text component="span" size="xs" fw={500} className={classes.tileLabel}>
+                                {label}
+                              </Text>
+                            </Group>
+                          </Box>
                         </Tooltip>
                       );
                     })}