Make devices page more big-screen-friendly

- reduce button sizes a bit
- put two devices (doors/hvac/lights/...) on a single row

Author: aastefanov

src/pages/Devices.tsx

@@ -29,7 +29,7 @@ const Devices = ({
     // const variant = useVariant();
     const variantName = useVariantName();
 
-    return (<Row className="row-cols row-cols-1 gap-4">
+    return (<Row className="row-cols row-cols-1 row-cols-xl-2 gy-4">
         {isLoading && <Col className="text-center">
             <LoadingIcon large/>
         </Col>}

src/widgets/DeviceActionButton/DeviceActionButton.scss

@@ -22,11 +22,11 @@
   }
 
   @include media-breakpoint-up(xl) {
-    width: 200px;
-    height: 200px;
+    width: 150px;
+    height: 150px;
 
     i {
-      font-size: 72pt;
+      font-size: 30pt;
     }
   }
 }

src/widgets/DeviceActionButton/DeviceActionButton.tsx

@@ -55,13 +55,13 @@ const DeviceActionButton = (
     const icon = isDoorOpen ? 'fa-solid fa-door-open' : type.icon;
     const label = t(isDoorOpen ? 'views.door.open' : 'views.devices.' + action);
 
-    return (<>
+    return <>
         <Button variant={variant} className="device-action-button" onClick={handleClick} disabled={disabled}>
             <i className={icon}/>
             <div>{label}</div>
         </Button>
         {error?.status && [401, 403].includes(error.status) && <RedirectToLogin/>}
-    </>);
+    </>;
 };
 
 export default DeviceActionButton;