fix likes bar, grid adjustment and menu width

2 files changed, 38 insertions, 3 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 38b7ea8d4..8e663d32f 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -302,12 +302,23 @@ table {
   font-weight: $font-semibold;
 }
 
+@media screen and (max-width: 1000px) {
+  .main-col {
+    &.expanded {
+      .margin-content {
+        margin-left: $expanded-horizontal-margins/2;
+        margin-right: $expanded-horizontal-margins/2;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 900px) {
   .main-col {
-    &, &.expanded {
+    &.expanded {
       .margin-content {
-        margin-left: 50px;
-        margin-right: 50px;
+        margin-left: $expanded-horizontal-margins/3;
+        margin-right: $expanded-horizontal-margins/3;
       }
 
       .sub-menu {
@@ -327,6 +338,10 @@ table {
     z-index: 10000;
   }
 
+  menu {
+    width: $menu-width;
+  }
+
   .main-col {
     margin-left: 0;
 
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index a8777af71..4abc887ad 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -4,6 +4,26 @@ $zindex-modal: 10005;
 $modal-footer-border-width: 0;
 $modal-md: 600px;
 
+$grid-breakpoints: (
+  // Extra small screen / phone
+  xs: 0,
+  // Small screen / phone
+  sm: 576px,
+  // Medium screen / tablet
+  md: 768px,
+  // Large screen / desktop
+  lg: 900px,
+  // Extra large screen / wide desktop
+  xl: 1200px
+);
+
+$container-max-widths: (
+  sm: 420px,
+  md: 720px,
+  lg: 900px,
+  xl: 1140px
+);
+
 $input-btn-focus-width: 0;
 $input-btn-focus-color: inherit;
 $input-focus-border-color: #ced4da;