Layout pages: Safe area fixes & related code improvements (#2959)

Signed-off-by: Florian Hotze <[email protected]>

Author: florian-h05

bundles/org.openhab.ui/web/src/components/widgets/standard/oh-card.vue

@@ -23,15 +23,6 @@
   </f7-card>
 </template>
 
-<style lang="stylus">
-// Fix safe-area issues where oh-card is used inside a block or masonry layout, where the safe areas are already respected by the parent block
-.oh-col >
-.oh-masonry-item >
-  .oh-card
-    margin-left var(--f7-card-margin-horizontal)
-    margin-right var(--f7-card-margin-horizontal)
-</style>
-
 <script>
 import mixin from '../widget-mixin'
 import { actionsMixin } from '@/components/widgets/widget-actions'

bundles/org.openhab.ui/web/src/css/app.styl

@@ -322,13 +322,5 @@ html
       .item-inner
         padding-right var(--f7-list-item-padding-horizontal)
 
-// Fix safe area issues with oh-cell components, where safe areas are already respected by the wrapping oh-block
-.oh-cell
-  margin-top var(--f7-card-expandable-margin-vertical)
-  margin-bottom var(--f7-card-expandable-margin-vertical)
-  margin-left var(--f7-card-expandable-margin-horizontal)
-  margin-right var(--f7-card-expandable-margin-horizontal)
-
-// Fix safe area issues inside block-narrow, where safe areas are already respected by the wrapping block-narrow
-// Fix is in nomini.css due to CssMinimizerPlugin minimizing app.styl and removing the unit px from 0px,
+// Additional safe area fixes are in nomini.css due to CssMinimizerPlugin minimizing app.styl and removing the unit px from 0px,
 // which breaks calculcations using the overwritten CSS variables.

bundles/org.openhab.ui/web/src/css/nomini.css

@@ -1,6 +1,8 @@
 /* CSS that shouldn't get minimized */
 /* e.g. due to CssMinimizerPlugin removing unit from 0px, which breaks calculations */
-.block-narrow {
+
+/* Fix safe area issues inside block-narrow, oh-grid-cells, oh-grid-row & oh-masonry, where safe areas are already respected by component or its parents itself */
+.block-narrow, .oh-cell, .oh-row, .oh-masonry-item {
   --f7-safe-area-left: 0px;
   --f7-safe-area-outer-left: 0px;
   --f7-safe-area-right: 0px;