fix: on phones, hide StatusStripe and TopTabStripe in landscape

starpit · starpit · commit b8c7b7c5b10c · 2023-01-29T20:44:23.000-05:00
diff --git a/plugins/plugin-client-common/web/scss/components/StatusStripe/StatusStripe.scss b/plugins/plugin-client-common/web/scss/components/StatusStripe/StatusStripe.scss
@@ -287,3 +287,9 @@ $z-index: var(--pf-global--ZIndex--xs);
 
   @include HideInNarrowWindows;
 }
+
+@media (orientation: landscape) and (max-height: 450px) {
+  @include StatusStripe {
+    display: none;
+  }
+}
diff --git a/plugins/plugin-client-common/web/scss/components/TopTabStripe/_index.scss b/plugins/plugin-client-common/web/scss/components/TopTabStripe/_index.scss
@@ -241,3 +241,9 @@ $tab-label-font-size: 0.875rem;
     align-items: stretch;
   }
 }
+
+@media (orientation: landscape) and (max-height: 450px) {
+  @include TopTabStripeAbsolute {
+    display: none;
+  }
+}
diff --git a/plugins/plugin-client-common/web/scss/components/TopTabStripe/_mixins.scss b/plugins/plugin-client-common/web/scss/components/TopTabStripe/_mixins.scss
@@ -23,7 +23,6 @@ $height: 3em;
 }
 
 @mixin TopTabStripe {
-  .pf-c-page,
   .kui--top-tab-stripe-header {
     @content;
   }

Original file line number	Diff line number	Diff line change
`@@ -287,3 +287,9 @@ $z-index: var(--pf-global--ZIndex--xs);`
`287`	`287`
`288`	`288`	`@include HideInNarrowWindows;`
`289`	`289`	`}`
	`290`	`+`
	`291`	`+@media (orientation: landscape) and (max-height: 450px) {`
	`292`	`+ @include StatusStripe {`
	`293`	`+ display: none;`
	`294`	`+ }`
	`295`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -241,3 +241,9 @@ $tab-label-font-size: 0.875rem;`
`241`	`241`	`align-items: stretch;`
`242`	`242`	`}`
`243`	`243`	`}`
	`244`	`+`
	`245`	`+@media (orientation: landscape) and (max-height: 450px) {`
	`246`	`+ @include TopTabStripeAbsolute {`
	`247`	`+ display: none;`
	`248`	`+ }`
	`249`	`+}`