Fix padding in room header

diff --git a/src/app/atoms/header/Header.scss b/src/app/atoms/header/Header.scss
index 081b61e2439f3f840b305b5c074428d6926734f2..9e45f8246697eac98c7e0b5ead4a238ee0e58b2f 100644 (file)
--- a/src/app/atoms/header/Header.scss
+++ b/src/app/atoms/header/Header.scss
@@ -1,6 +1,5 @@
 @use '../../partials/text';
 @use '../../partials/dir';
-@use '../../partials/screen';
 
 .header {
   @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
@@ -41,8 +40,4 @@
       display: -webkit-box;
     }
   }
-
-  @include screen.smallerThan(mobileBreakpoint) {
-    @include dir.side(padding, calc(var(--sp-normal) - 10px), var(--sp-extra-tight));
-  }
 }
\ No newline at end of file

diff --git a/src/app/organisms/room/RoomView.scss b/src/app/organisms/room/RoomView.scss
index 2eda3ea7b4bb8418bc6943a41311691be0dc2ad9..4f06bf262dc9059589b8a90e7c5b19a91c8b19a7 100644 (file)
--- a/src/app/organisms/room/RoomView.scss
+++ b/src/app/organisms/room/RoomView.scss
@@ -1,4 +1,6 @@
 @use '../../partials/flex';
+@use '../../partials/screen';
+@use '../../partials/dir';
 
 .room-view {
   @extend .cp-fx__column;
@@ -18,6 +20,12 @@
     box-shadow: var(--bs-popup);
   }
 
+  & .header {
+    @include screen.smallerThan(mobileBreakpoint) {
+      padding: 0 var(--sp-tight);
+    }
+  }
+
   &__content-wrapper {
     @extend .cp-fx__item-one;
     @extend .cp-fx__column;

diff --git a/src/app/organisms/room/RoomViewHeader.scss b/src/app/organisms/room/RoomViewHeader.scss
index 79bb8dd2b309b367b414f5cccad1afb58acb5cef..267cd11653b5e9a355dc355ee1b5192e5d74ecfd 100644 (file)
--- a/src/app/organisms/room/RoomViewHeader.scss
+++ b/src/app/organisms/room/RoomViewHeader.scss
@@ -27,14 +27,14 @@
   }
 }
 
-.header .room-header__drawer-btn {
+.room-header__drawer-btn {
   @include screen.smallerThan(tabletBreakpoint) {
     display: none;
   }
 }
 
-.header .room-header__back-btn {
-  @include dir.side(margin, 0, 5px);
+.room-header__back-btn {
+  @include dir.side(margin, 0, var(--sp-tight));
 
   @include screen.biggerThan(mobileBreakpoint) {
     display: none;

diff --git a/src/app/partials/_screen.scss b/src/app/partials/_screen.scss
new file mode 100644 (file)
index 0000000..6d524f2
--- /dev/null
+++ b/src/app/partials/_screen.scss
@@ -0,0 +1,28 @@
+
+$breakpoint-tablet: 900px;
+$breakpoint-mobile: 750px;
+
+@mixin smallerThan($deviceBreakpoint) {
+  @if $deviceBreakpoint==mobileBreakpoint {
+    @media screen and (max-width: $breakpoint-mobile) {
+      @content;
+    }
+  }
+  @else if $deviceBreakpoint==tabletBreakpoint {
+    @media screen and (max-width: $breakpoint-tablet) {
+      @content;
+    }
+  }
+}
+
+@mixin biggerThan($deviceBreakpoint) {
+  @if $deviceBreakpoint==mobileBreakpoint {
+    @media screen and (min-width: $breakpoint-mobile) {
+      @content;
+    }
+  } @else if $deviceBreakpoint==tabletBreakpoint {
+    @media screen and (min-width: $breakpoint-tablet) {
+      @content;
+    }
+  }
+}

diff --git a/src/app/partials/screen.scss b/src/app/partials/screen.scss
deleted file mode 100644 (file)
index 6d524f2..0000000
--- a/src/app/partials/screen.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-
-$breakpoint-tablet: 900px;
-$breakpoint-mobile: 750px;
-
-@mixin smallerThan($deviceBreakpoint) {
-  @if $deviceBreakpoint==mobileBreakpoint {
-    @media screen and (max-width: $breakpoint-mobile) {
-      @content;
-    }
-  }
-  @else if $deviceBreakpoint==tabletBreakpoint {
-    @media screen and (max-width: $breakpoint-tablet) {
-      @content;
-    }
-  }
-}
-
-@mixin biggerThan($deviceBreakpoint) {
-  @if $deviceBreakpoint==mobileBreakpoint {
-    @media screen and (min-width: $breakpoint-mobile) {
-      @content;
-    }
-  } @else if $deviceBreakpoint==tabletBreakpoint {
-    @media screen and (min-width: $breakpoint-tablet) {
-      @content;
-    }
-  }
-}