From 4574d1e7e2bccd2e919362ea1526b19c87de87d7 Mon Sep 17 00:00:00 2001 From: Nick Mitchell Date: Sun, 29 Jan 2023 19:43:40 -0500 Subject: [PATCH] fix: on phones, hide StatusStripe and TopTabStripe in landscape --- .../web/scss/components/StatusStripe/StatusStripe.scss | 6 ++++++ .../web/scss/components/TopTabStripe/_index.scss | 6 ++++++ .../web/scss/components/TopTabStripe/_mixins.scss | 1 - 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/plugins/plugin-client-common/web/scss/components/StatusStripe/StatusStripe.scss b/plugins/plugin-client-common/web/scss/components/StatusStripe/StatusStripe.scss index 7f7d8c00fa8..bfc58f8d464 100644 --- 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 index b67b7641f39..c140eecfa84 100644 --- 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 index bc3ef10631d..0d498127678 100644 --- 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; }