🐛 Made aspect ratio 1 to 1

data/configs/default.json

@@ -18,87 +18,12 @@
   ],
   "apps": [
     {
-      "id": "76217a87-7151-42d0-b0cf-1b72aef63f83",
+      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a",
-      "name": "Small app",
+      "name": "Documentation",
       "url": "https://homarr.dev",
-      "appearance": {
-        "iconUrl": "/imgs/logo/logo.png"
-      },
-      "network": {
-        "enabledStatusChecker": false,
-        "okStatus": []
-      },
       "behaviour": {
-        "isOpeningNewTab": true,
+        "onClickUrl": "https://homarr.dev",
-        "externalUrl": "https://homarr.dev"
+        "externalUrl": "https://homarr.dev",
-      },
-      "area": {
-        "type": "category",
-        "properties": {
-          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
-        }
-      },
-      "shape": {
-        "location": {
-          "x": 0,
-          "y": 2
-        },
-        "size": {
-          "width": 2,
-          "height": 2
-        }
-      },
-      "integration": {
-        "type": null,
-        "properties": []
-      }
-    },
-    {
-      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a337",
-      "name": "Discord",
-      "url": "https://discord.com/invite/aCsmEV5RgA",
-      "behaviour": {
-        "onClickUrl": "https://discord.com/invite/aCsmEV5RgA",
-        "isOpeningNewTab": true,
-        "externalUrl": "https://discord.com/invite/aCsmEV5RgA"
-      },
-      "network": {
-        "enabledStatusChecker": false,
-        "okStatus": [
-          200
-        ]
-      },
-      "appearance": {
-        "iconUrl": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/discord.png"
-      },
-      "integration": {
-        "type": null,
-        "properties": []
-      },
-      "area": {
-        "type": "category",
-        "properties": {
-          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
-        }
-      },
-      "shape": {
-        "location": {
-          "x": 0,
-          "y": 4
-        },
-        "size": {
-          "width": 4,
-          "height": 3
-        }
-      }
-    },
-    {
-      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990",
-      "name": "Donate",
-      "url": "https://ko-fi.com/ajnart",
-      "behaviour": {
-        "onClickUrl": "https://ko-fi.com/ajnart",
-        "externalUrl": "https://ko-fi.com/ajnart",
         "isOpeningNewTab": true
       },
       "network": {
@@ -108,26 +33,26 @@
         ]
       },
       "appearance": {
-        "iconUrl": "https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png"
+        "iconUrl": "/imgs/logo/logo.png"
       },
       "integration": {
         "type": null,
         "properties": []
       },
       "area": {
-        "type": "category",
+        "type": "wrapper",
         "properties": {
-          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
+          "id": "default"
         }
       },
       "shape": {
         "location": {
-          "x": 2,
+          "x": 0,
-          "y": 2
+          "y": 11
         },
         "size": {
-          "width": 2,
+          "width": 4,
-          "height": 2
+          "height": 3
         }
       }
     },
@@ -155,7 +80,7 @@
       "shape": {
         "location": {
           "x": 8,
-          "y": 12
+          "y": 10
         },
         "size": {
           "width": 4,
@@ -167,6 +92,42 @@
         "properties": []
       }
     },
+    {
+      "id": "5df743d9-5cb1-457c-85d2-64ff86855652",
+      "name": "Your app",
+      "url": "https://homarr.dev",
+      "appearance": {
+        "iconUrl": "/imgs/logo/logo.png"
+      },
+      "network": {
+        "enabledStatusChecker": false,
+        "okStatus": []
+      },
+      "behaviour": {
+        "isOpeningNewTab": true,
+        "externalUrl": "https://homarr.dev"
+      },
+      "area": {
+        "type": "wrapper",
+        "properties": {
+          "id": "default"
+        }
+      },
+      "shape": {
+        "location": {
+          "x": 0,
+          "y": 7
+        },
+        "size": {
+          "width": 6,
+          "height": 4
+        }
+      },
+      "integration": {
+        "type": null,
+        "properties": []
+      }
+    },
     {
       "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a330",
       "name": "Contribute",
@@ -198,56 +159,17 @@
       "shape": {
         "location": {
           "x": 4,
-          "y": 2
+          "y": 0
         },
         "size": {
-          "width": 2,
+          "width": 1,
-          "height": 2
+          "height": 1
         }
       }
     },
     {
-      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a",
+      "id": "76217a87-7151-42d0-b0cf-1b72aef63f83",
-      "name": "Documentation",
+      "name": "Small app",
-      "url": "https://homarr.dev",
-      "behaviour": {
-        "onClickUrl": "https://homarr.dev",
-        "externalUrl": "https://homarr.dev",
-        "isOpeningNewTab": true
-      },
-      "network": {
-        "enabledStatusChecker": false,
-        "okStatus": [
-          200
-        ]
-      },
-      "appearance": {
-        "iconUrl": "/imgs/logo/logo.png"
-      },
-      "integration": {
-        "type": null,
-        "properties": []
-      },
-      "area": {
-        "type": "wrapper",
-        "properties": {
-          "id": "default"
-        }
-      },
-      "shape": {
-        "location": {
-          "x": 8,
-          "y": 9
-        },
-        "size": {
-          "width": 4,
-          "height": 3
-        }
-      }
-    },
-    {
-      "id": "5df743d9-5cb1-457c-85d2-64ff86855652",
-      "name": "Your app",
       "url": "https://homarr.dev",
       "appearance": {
         "iconUrl": "/imgs/logo/logo.png"
@@ -261,32 +183,111 @@
         "externalUrl": "https://homarr.dev"
       },
       "area": {
-        "type": "wrapper",
+        "type": "category",
         "properties": {
-          "id": "default"
+          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
         }
       },
       "shape": {
         "location": {
-          "x": 0,
+          "x": 5,
-          "y": 7
+          "y": 0
         },
         "size": {
-          "width": 6,
+          "width": 1,
-          "height": 4
+          "height": 1
         }
       },
       "integration": {
         "type": null,
         "properties": []
       }
+    },
+    {
+      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a337",
+      "name": "Discord",
+      "url": "https://discord.com/invite/aCsmEV5RgA",
+      "behaviour": {
+        "onClickUrl": "https://discord.com/invite/aCsmEV5RgA",
+        "isOpeningNewTab": true,
+        "externalUrl": "https://discord.com/invite/aCsmEV5RgA"
+      },
+      "network": {
+        "enabledStatusChecker": false,
+        "okStatus": [
+          200
+        ]
+      },
+      "appearance": {
+        "iconUrl": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/discord.png"
+      },
+      "integration": {
+        "type": null,
+        "properties": []
+      },
+      "area": {
+        "type": "category",
+        "properties": {
+          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
+        }
+      },
+      "shape": {
+        "location": {
+          "x": 6,
+          "y": 0
+        },
+        "size": {
+          "width": 1,
+          "height": 1
+        }
+      }
+    },
+    {
+      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990",
+      "name": "Donate",
+      "url": "https://ko-fi.com/ajnart",
+      "behaviour": {
+        "onClickUrl": "https://ko-fi.com/ajnart",
+        "externalUrl": "https://ko-fi.com/ajnart",
+        "isOpeningNewTab": true
+      },
+      "network": {
+        "enabledStatusChecker": false,
+        "okStatus": [
+          200
+        ]
+      },
+      "appearance": {
+        "iconUrl": "https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png"
+      },
+      "integration": {
+        "type": null,
+        "properties": []
+      },
+      "area": {
+        "type": "category",
+        "properties": {
+          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
+        }
+      },
+      "shape": {
+        "location": {
+          "x": 7,
+          "y": 0
+        },
+        "size": {
+          "width": 1,
+          "height": 1
+        }
+      }
     }
   ],
   "widgets": [
     {
-      "id": "date",
+      "id": "weather",
       "properties": {
-        "display24HourFormat": true
+        "displayInFahrenheit": false,
+        "location": "Paris"
       },
       "area": {
         "type": "category",
@@ -300,30 +301,29 @@
           "y": 0
         },
         "size": {
-          "width": 6,
+          "width": 2,
           "height": 2
         }
       }
     },
     {
-      "id": "weather",
+      "id": "date",
       "properties": {
-        "displayInFahrenheit": false,
+        "display24HourFormat": true
-        "location": "Paris"
       },
       "area": {
-        "type": "wrapper",
+        "type": "category",
         "properties": {
-          "id": "default"
+          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
         }
       },
       "shape": {
         "location": {
-          "x": 0,
+          "x": 2,
           "y": 0
         },
         "size": {
-          "width": 4,
+          "width": 2,
           "height": 2
         }
       }

src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts

@@ -43,7 +43,8 @@ export const useGridstack = (
   // reference of the gridstack object for modifications after initialization
   const gridRef = useRef<GridStack>();
   // width of the wrapper (updating on page resize)
-  const { width, height } = useResize(wrapperRef);
+  const { width } = useResize(wrapperRef);
+  const root: HTMLHtmlElement = useMemo(() => document.querySelector(':root')!, []);
 
   const items = useMemo(
     () =>
@@ -127,6 +128,14 @@ export const useGridstack = (
     );
   }, [isLargerThanSm]);
 
+  useEffect(() => {
+    if (width === 0) return;
+    const widgetWidth = width / (isLargerThanSm ? 12 : 6);
+    // widget width is used to define sizes of gridstack items within global.scss
+    root.style.setProperty('--gridstack-widget-width', widgetWidth.toString());
+    gridRef.current?.cellHeight(widgetWidth);
+  }, [width, isLargerThanSm]);
+
   const onChange = isEditMode
     ? (changedNode: GridStackNode) => {
         if (!configName) return;

src/hooks/use-resize.ts

@@ -19,5 +19,9 @@ export const useResize = (myRef: MutableRefObject<HTMLDivElement | null>) => {
     };
   }, [myRef, handleResize]);
 
+  useEffect(() => {
+    handleResize();
+  }, [myRef]);
+
   return { width, height };
 };

src/styles/global.scss

@@ -1,5 +1,9 @@
 @import 'fily-publish-gridstack/dist/gridstack.min.css';
 
+:root {
+  --gridstack-widget-width: 64;
+}
+
 .grid-stack-placeholder > .placeholder-content {
   background-color: rgb(248, 249, 250) !important;
   border-radius: 12px;
@@ -19,9 +23,9 @@
 }
 
 @for $i from 1 to 96 {
-  .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height:  $i * 64 + "px" }
+  .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height:  calc($i * #{var(--gridstack-widget-width)}) }
-  .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height:  $i * 64 + "px" }
+  .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height:  calc($i * #{var(--gridstack-widget-width)}) }
-  .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height:  $i * 64 + "px" }
+  .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height:  calc($i * #{var(--gridstack-widget-width)}) }
 }
 
 @for $i from 1 to 13 {
@@ -30,7 +34,7 @@
 
 
 @for $i from 1 to 96 {
-	.grid-stack>.grid-stack-item[gs-y="#{$i}"]  { top:  $i * 64 + "px" }
+	.grid-stack>.grid-stack-item[gs-y="#{$i}"]  { top:  calc($i * #{var(--gridstack-widget-width)})  }
 }
 
 .grid-stack>.grid-stack-item>.grid-stack-item-content,