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

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) => {
+      {items.map((item) => (
-        return (
+        <BoardItem
-          <div
+          key={item.id}
-            key={item.id}
+          refs={refs}
-            className="grid-stack-item"
+          item={item}
-            data-id={item.id}
+          opacity={board.opacity}
-            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>
-        );
-      })}
     </>
   );
 };
 
 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);

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,

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")}