From 669a79ef08d3adcf2cb1f26dd76644eea349c7f2 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Thu, 16 May 2024 18:48:20 +0200
Subject: [PATCH] style: improve styling of items on board (#504)

style: improve styling of items on board by defining margin depending on screen size, removing general padding on card of items and reducing size of no app icon
---
 .../src/components/board/sections/content.tsx | 87 +++++++++++--------
 .../sections/gridstack/init-gridstack.ts      |  4 +-
 packages/widgets/src/app/component.tsx        |  2 +-
 3 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/apps/nextjs/src/components/board/sections/content.tsx b/apps/nextjs/src/components/board/sections/content.tsx
index ea0c7da92..2d042f27b 100644
--- a/apps/nextjs/src/components/board/sections/content.tsx
+++ b/apps/nextjs/src/components/board/sections/content.tsx
@@ -39,56 +39,69 @@ interface Props {
 
 export const SectionContent = ({ items, refs }: Props) => {
   const board = useRequiredBoard();
-  const { ref, width, height } = useElementSize<HTMLDivElement>();
 
   return (
     <>
-      {items.map((item) => {
-        return (
-          <div
-            key={item.id}
-            className="grid-stack-item"
-            data-id={item.id}
-            gs-x={item.xOffset}
-            gs-y={item.yOffset}
-            gs-w={item.width}
-            gs-h={item.height}
-            gs-min-w={1}
-            gs-min-h={1}
-            gs-max-w={4}
-            gs-max-h={4}
-            ref={refs.items.current[item.id] as RefObject<HTMLDivElement>}
-          >
-            <Card
-              ref={ref}
-              className={combineClasses(
-                classes.itemCard,
-                "grid-stack-item-content",
-              )}
-              withBorder
-              styles={{
-                root: {
-                  "--opacity": board.opacity / 100,
-                },
-              }}
-              p={width >= 96 ? undefined : "xs"}
-            >
-              <BoardItem item={item} width={width + 32} height={height + 32} />
-            </Card>
-          </div>
-        );
-      })}
+      {items.map((item) => (
+        <BoardItem
+          key={item.id}
+          refs={refs}
+          item={item}
+          opacity={board.opacity}
+        />
+      ))}
     </>
   );
 };
 
 interface ItemProps {
+  item: Item;
+  refs: UseGridstackRefs;
+  opacity: number;
+}
+
+const BoardItem = ({ refs, item, opacity }: ItemProps) => {
+  const { ref, width, height } = useElementSize<HTMLDivElement>();
+
+  return (
+    <div
+      key={item.id}
+      className="grid-stack-item"
+      data-id={item.id}
+      gs-x={item.xOffset}
+      gs-y={item.yOffset}
+      gs-w={item.width}
+      gs-h={item.height}
+      gs-min-w={1}
+      gs-min-h={1}
+      gs-max-w={4}
+      gs-max-h={4}
+      ref={refs.items.current[item.id] as RefObject<HTMLDivElement>}
+    >
+      <Card
+        ref={ref}
+        className={combineClasses(classes.itemCard, "grid-stack-item-content")}
+        withBorder
+        styles={{
+          root: {
+            "--opacity": opacity / 100,
+          },
+        }}
+        p={0}
+      >
+        <BoardItemContent item={item} width={width} height={height} />
+      </Card>
+    </div>
+  );
+};
+
+interface ItemContentProps {
   item: Item;
   width: number;
   height: number;
 }
 
-const BoardItem = ({ item, ...dimensions }: ItemProps) => {
+const BoardItemContent = ({ item, ...dimensions }: ItemContentProps) => {
   const board = useRequiredBoard();
   const editMode = useAtomValue(editModeAtom);
   const serverData = useServerDataFor(item.id);
diff --git a/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
index f31cfd5ca..310f7aadb 100644
--- a/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
+++ b/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
@@ -26,7 +26,9 @@ export const initializeGridstack = ({
   newGrid.current = GridStack.init(
     {
       column: sectionColumnCount,
-      margin: 10,
+      margin: Math.round(
+        Math.max(Math.min(refs.wrapper.current.offsetWidth / 100, 10), 1),
+      ),
       cellHeight: 128,
       float: true,
       alwaysShowResizeHandle: true,
diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index 98c67dde1..896b66d40 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -78,7 +78,7 @@ export default function AppWidget({
     return (
       <Tooltip.Floating label={t("error.notFound.tooltip")}>
         <Stack gap="xs" align="center" justify="center" h="100%" w="100%">
-          <IconDeviceDesktopX size={width >= 96 ? "2rem" : "1.5rem"} />
+          <IconDeviceDesktopX size={width >= 96 ? "2rem" : "1rem"} />
           {width >= 96 && (
             <Text ta="center" size="sm">
               {t("error.notFound.label")}