Fix datetile and weathertile display for 1x1 size

src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx

@@ -42,7 +42,6 @@ const SidebarInner = ({ location }: DashboardSidebarInnerProps) => {
         className="grid-stack grid-stack-sidebar"
         style={{ transitionDuration: '0s', height: '100%' }}
         data-sidebar={location}
-        // eslint-disable-next-line react/no-unknown-property
         gs-min-row={minRow}
       >
         <WrapperContent apps={apps} refs={refs} widgets={widgets} />

src/widgets/date/DateTile.tsx

@@ -1,4 +1,5 @@
 import { Stack, Text, Title } from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
 import { IconClock } from '@tabler/icons';
 import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
@@ -16,7 +17,7 @@ const definition = defineWidget({
     },
   },
   gridstack: {
-    minWidth: 2,
+    minWidth: 1,
     minHeight: 1,
     maxWidth: 12,
     maxHeight: 12,
@@ -33,11 +34,12 @@ interface DateTileProps {
 function DateTile({ widget }: DateTileProps) {
   const date = useDateState();
   const formatString = widget.properties.display24HourFormat ? 'HH:mm' : 'h:mm A';
+  const { width, height, ref } = useElementSize();
 
   return (
-    <Stack spacing="xs" justify="space-around" align="center" style={{ height: '100%' }}>
+    <Stack ref={ref} spacing="xs" justify="space-around" align="center" style={{ height: '100%' }}>
       <Title>{dayjs(date).format(formatString)}</Title>
-      <Text size="lg">{dayjs(date).format('dddd, MMMM D')}</Text>
+      {width > 200 && <Text size="lg">{dayjs(date).format('dddd, MMMM D')}</Text>}
     </Stack>
   );
 }

src/widgets/weather/WeatherTile.tsx

@@ -1,4 +1,5 @@
 import { Center, Group, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
 import { IconArrowDownRight, IconArrowUpRight, IconCloudRain } from '@tabler/icons';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
@@ -19,7 +20,7 @@ const definition = defineWidget({
     },
   },
   gridstack: {
-    minWidth: 2,
+    minWidth: 1,
     minHeight: 1,
     maxWidth: 12,
     maxHeight: 12,
@@ -35,10 +36,17 @@ interface WeatherTileProps {
 
 function WeatherTile({ widget }: WeatherTileProps) {
   const { data: weather, isLoading, isError } = useWeatherForCity(widget.properties.location);
+  const { width, height, ref } = useElementSize();
 
   if (isLoading) {
     return (
-      <>
+      <Stack
+        ref={ref}
+        spacing="xs"
+        justify="space-around"
+        align="center"
+        style={{ height: '100%', width: '100%' }}
+      >
         <Skeleton height={40} width={100} mb="xl" />
         <Group noWrap>
           <Skeleton height={50} circle />
@@ -47,7 +55,7 @@ function WeatherTile({ widget }: WeatherTileProps) {
             <Skeleton height={25} width={70} />
           </Group>
         </Group>
-      </>
+      </Stack>
     );
   }
 
@@ -62,20 +70,22 @@ function WeatherTile({ widget }: WeatherTileProps) {
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <Stack
+      ref={ref}
       spacing="xs"
       justify="space-around"
       align="center"
       style={{ height: '100%', width: '100%' }}
     >
-      <Group grow>
+      <Group align={'center'} position="center" spacing="xs">
         <WeatherIcon code={weather!.current_weather.weathercode} />
-        <Title order={2}>
+        <Title>
           {getPerferedUnit(
             weather!.current_weather.temperature,
             widget.properties.displayInFahrenheit
           )}
         </Title>
       </Group>
+      {width > 200 && (
         <Group noWrap spacing="xs">
           <IconArrowUpRight />
           {getPerferedUnit(
@@ -88,6 +98,7 @@ function WeatherTile({ widget }: WeatherTileProps) {
             widget.properties.displayInFahrenheit
           )}
         </Group>
+      )}
     </Stack>
   );
 }