Mobile wide screen fixed

Author: Zabrafax

frontend/src/components/clock/ClockGrid.js

@@ -13,7 +13,7 @@ function ClockGrid(props) {
 
     const { currentTimeZoneId } = useTimeZones();
     const { handleError } = useErrorContext();
-    const { isTablet, isMobile } = useDeviceContext();
+    const { isTablet, isMobile, isSmallHorizontal } = useDeviceContext();
 
     const [gridRows, setGridRows] = useState(rows);
     const [gridCols, setGridCols] = useState(cols * 6);
@@ -26,7 +26,7 @@ function ClockGrid(props) {
     const previousHourArrowDegreesArray = useRef("");
 
     useEffect(() => {
-        if(isTablet) {
+        if(isTablet || isSmallHorizontal) {
             setGridSize(2)
         } else {
             if(isSecondsEnabled && isSeparatorsEnabled) {
@@ -41,6 +41,8 @@ function ClockGrid(props) {
     }, [isSecondsEnabled, isSeparatorsEnabled, isMobile, isTablet]);
 
     useEffect(() => {
+        console.log("isMobile: ", isMobile + ", isTablet: " + isTablet);
+
         if (!currentTimeZoneId) {
             //console.warn("Timezone is not defined, waiting...");
             return;

frontend/src/components/contexts/DeviceContext.js

@@ -3,13 +3,15 @@ import {createContext, useContext, useEffect, useState} from "react";
 const DeviceContext = createContext();
 
 export function DeviceProvider({ children }) {
+    const [isSmallHorizontal, setIsSmallHorizontal] = useState(window.innerHeight <= 480);
     const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
-    const [isTablet, setIsTablet] = useState(window.innerWidth <= 1024);
+    const [isTablet, setIsTablet] = useState(window.innerWidth <= 1024 && window.innerHeight > 480);
 
     useEffect(() => {
         function handleResize() {
-            setIsMobile(window.innerWidth <= 768 || window.innerHeight <= 768);
-            setIsTablet(window.innerWidth <= 1024);
+            setIsSmallHorizontal(window.innerHeight <= 480);
+            setIsMobile(window.innerWidth <= 768);
+            setIsTablet(window.innerWidth <= 1024 && window.innerHeight > 480);
         }
 
         window.addEventListener('resize', handleResize);
@@ -20,6 +22,7 @@ export function DeviceProvider({ children }) {
         <DeviceContext.Provider value={{
             isMobile,
             isTablet,
+            isSmallHorizontal
         }}>
             {children}
         </DeviceContext.Provider>