From: Ajay Bura <ajbura@gmail.com>
Date: Sun, 24 Apr 2022 10:47:26 +0000 (+0530)
Subject: Fix padding in room header
X-Git-Tag: v2.0.0~42
X-Git-Url: https://git.wafflesoft.org/?a=commitdiff_plain;h=74216f75e2b47d517b50fa951a608f525dfd1f7b;p=cinny.git

Fix padding in room header
---

diff --git a/src/app/atoms/header/Header.scss b/src/app/atoms/header/Header.scss
index 081b61e..9e45f82 100644
--- 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 2eda3ea..4f06bf2 100644
--- 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 79bb8dd..267cd11 100644
--- 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
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
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;
-    }
-  }
-}