feat(ui): Change desktop UI breakpoint from min 600px to min 750px width

Hypfer · May 27, 2024 · 97818ac · 97818ac
1 parent 03ff290
commit 97818ac
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 5 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -35,6 +35,15 @@ const App = (): React.ReactElement => {
                 },
                 transitions: {
                     duration: transitionDurations
+                },
+                breakpoints: {
+                    values: {
+                        xs: 0,
+                        sm: 750,
+                        md: 900,
+                        lg: 1200,
+                        xl: 1536,
+                    },
                 }
             });
         },

diff --git a/frontend/src/components/LogViewer.module.css b/frontend/src/components/LogViewer.module.css
@@ -67,7 +67,7 @@
     color: #DF5618;
 }
 
-@media print, screen and (max-width: 600px) {
+@media print, screen and (max-width: 750px) {
     .metadata {
         flex-direction:column;
         margin-right: inherit;

diff --git a/frontend/src/components/PaperContainer.module.css b/frontend/src/components/PaperContainer.module.css
@@ -8,7 +8,7 @@
 
 }
 
-@media print, screen and (max-width: 600px) {
+@media print, screen and (max-width: 750px) {
     .paperContainerPaper {
         margin-top: 0;
         margin-bottom: 0;

diff --git a/frontend/src/valetudo/About.module.css b/frontend/src/valetudo/About.module.css
@@ -4,7 +4,7 @@
     margin-right: auto;
     text-align: justify
 }
-@media print, screen and (max-width: 600px) {
+@media print, screen and (max-width: 750px) {
     .reactMarkDown {
         max-width: 90%
     }

diff --git a/frontend/src/valetudo/Help.module.css b/frontend/src/valetudo/Help.module.css
@@ -4,7 +4,7 @@
     margin-right: auto;
     text-align: justify
 }
-@media print, screen and (max-width: 600px) {
+@media print, screen and (max-width: 750px) {
     .reactMarkDown {
         max-width: 90%
     }

diff --git a/frontend/src/valetudo/Log.module.css b/frontend/src/valetudo/Log.module.css
@@ -4,7 +4,7 @@
 }
 
 
-@media print, screen and (max-width: 600px) {
+@media print, screen and (max-width: 750px) {
     .logViewer {
         height: calc(68vh - 56px)
     }