refactor(style): mobile view starts at 672px width (#535)

Signed-off-by: Alexander Peverett <[email protected]> Co-authored-by: Alessandro Pomponio <[email protected]>
st4sd · May 31, 2024 · 5f69d0b · 5f69d0b
1 parent 455e9da
commit 5f69d0b
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 9 deletions.
diff --git a/src/canvas/styles/main.scss b/src/canvas/styles/main.scss
@@ -249,7 +249,7 @@ aside .node > * {
   flex-grow: 1;
   height: 100%;
 }
-@media screen and (max-width: 672px) {
+@media screen and (max-width: 671px) {
   .dndflow {
     flex-direction: column;
   }
@@ -289,7 +289,7 @@ aside .node > * {
   }
 }
 
-@media screen and (max-height: 672px) and (max-width: 672px) {
+@media screen and (max-height: 672px) and (max-width: 671px) {
   aside #controls {
     height: 100%;
     overflow-y: scroll;

diff --git a/src/components/ComponentView/RunPropertiesTable.vue b/src/components/ComponentView/RunPropertiesTable.vue
@@ -300,7 +300,7 @@ bx-table-header-cell {
   margin-top: 0;
 }
 
-@media screen and (max-width: 672px) {
+@media screen and (max-width: 671px) {
   .download-text {
     display: none;
   }

diff --git a/src/components/ExperimentView/PageHero.vue b/src/components/ExperimentView/PageHero.vue
@@ -271,7 +271,7 @@ dds-cta-block {
   padding: 0;
   font-size: 16px;
 
-  @media screen and (max-width: 672px) {
+  @media screen and (max-width: 671px) {
     padding-top: 2rem;
   }
 }

diff --git a/src/components/St4sdExperimentCards/St4sdExperimentCards.vue b/src/components/St4sdExperimentCards/St4sdExperimentCards.vue
@@ -209,7 +209,7 @@ export default {
   }
 }
 
-@media screen and (max-width: 672px) {
+@media screen and (max-width: 671px) {
   .card-proportions {
     max-height: none;
   }

diff --git a/src/components/St4sdStatusIndicator/St4sdStatusIndicator.vue b/src/components/St4sdStatusIndicator/St4sdStatusIndicator.vue
@@ -154,7 +154,7 @@ export default {
   }
 }
 
-@media screen and (max-width: 672px) {
+@media screen and (max-width: 671px) {
   #statusChart {
     width: 75%;
   }

diff --git a/src/views/ExperimentView/ExperimentView.vue b/src/views/ExperimentView/ExperimentView.vue
@@ -398,15 +398,15 @@ bx-breadcrumb-item {
     font-size: calc(16px + (24 - 16) * ((100vw - 42rem) / (1056 - 672)));
     margin-bottom: 1rem;
   }
-  @media screen and (max-width: 672px) {
+  @media screen and (max-width: 671px) {
     margin-bottom: 16px;
     margin-left: 0;
   }
   font-size: 1.5em;
 }
 
 .ve-copy {
-  @media screen and (max-width: 672px) {
+  @media screen and (max-width: 671px) {
     margin-left: 0;
   }
   margin-right: 16px;

diff --git a/src/views/GlobalRegistryLibraryView/GlobalRegistryLibraryView.vue b/src/views/GlobalRegistryLibraryView/GlobalRegistryLibraryView.vue
@@ -287,7 +287,7 @@ export default {
   height: fit-content;
 }
 
-@media screen and (max-width: 672px) {
+@media screen and (max-width: 671px) {
   #basket {
     max-width: 300px;
     margin-left: 1rem;