From 2666508143e887194b72ef52bfb2928e584705b8 Mon Sep 17 00:00:00 2001
From: Lorenzo D'Ianni <lorenzodianni@gmail.com>
Date: Thu, 27 Oct 2022 21:17:37 +0200
Subject: [PATCH] fix: menu overflow in small screens

---
 .../static/css/scss/abstracts/_mixins.scss    |  7 ++++++
 .../static/css/scss/abstracts/_variables.scss |  4 +++-
 .../static/css/scss/components/_dropdown.scss | 13 ++++++----
 .../static/css/scss/layout/_header.scss       | 24 +++++++++++++++++++
 .../static/css/scss/layout/_welcome.scss      |  5 ++++
 5 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/themes/conventional-commits/static/css/scss/abstracts/_mixins.scss b/themes/conventional-commits/static/css/scss/abstracts/_mixins.scss
index 4a54886..87f1c49 100644
--- a/themes/conventional-commits/static/css/scss/abstracts/_mixins.scss
+++ b/themes/conventional-commits/static/css/scss/abstracts/_mixins.scss
@@ -1,5 +1,12 @@
 @import "variables";
 
+@mixin up-to-mobile {
+  @media (max-width: #{$mobile-width - 1px}) {
+    @content;
+  }
+}
+
+
 @mixin tablet {
   @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
     @content;
diff --git a/themes/conventional-commits/static/css/scss/abstracts/_variables.scss b/themes/conventional-commits/static/css/scss/abstracts/_variables.scss
index 2b2ac29..bf9a921 100644
--- a/themes/conventional-commits/static/css/scss/abstracts/_variables.scss
+++ b/themes/conventional-commits/static/css/scss/abstracts/_variables.scss
@@ -14,6 +14,7 @@ $radius-lg: 8px;
 
 $shadow-soft: 0 2px 10px 0 rgba(0, 0, 0, .03), 0 2px 20px 10px rgba(0, 0, 0, 0.02);
 
+$mobile-width: 350px;
 $tablet-width: 768px;
 $desktop-width: 1024px;
 
@@ -28,13 +29,14 @@ $main-background: $color-neutral-light;
 $article-background: $color-neutral-light;
 $article-offset-top: -$header-height + -$gap-sm;
 
-$dropdown-padding: 12px 16px;
 $dropdown-border-radius: $radius-md;
 $dropdown-animation-timing: .4s;
+$dropdown-label-padding: 12px 8px;
 $dropdown-label-background-color: transparent;
 $dropdown-arrow-size: 10px;
 $dropdown-options-background-color: $color-neutral-light;
 $dropdown-options-space-from-label: $gap-sm;
+$dropdown-option-padding: 12px 16px;
 $dropdown-option-border-bottom-color: rgba($color-neutral-dark, .04);
 
 $banner-image-height: 300px;
diff --git a/themes/conventional-commits/static/css/scss/components/_dropdown.scss b/themes/conventional-commits/static/css/scss/components/_dropdown.scss
index 9b1b173..ac4a65d 100644
--- a/themes/conventional-commits/static/css/scss/components/_dropdown.scss
+++ b/themes/conventional-commits/static/css/scss/components/_dropdown.scss
@@ -21,7 +21,6 @@
 
 .dropdown {
   position: relative;
-  min-width: 110px;
 
   &__label {
     display: block;
@@ -34,7 +33,7 @@
     text-decoration: inherit;
     text-transform: inherit;
     text-align: center;
-    padding: $dropdown-padding;
+    padding: $dropdown-label-padding;
     background-color: $dropdown-label-background-color;
     border-radius: $dropdown-border-radius;
     &:after {
@@ -51,7 +50,8 @@
 
   &__options {
     visibility: visible;
-    min-width: 100%;
+    z-index: 1;
+    min-width: 110px;
     max-height: 50vh;
     position: absolute;
     top: 100%;
@@ -64,6 +64,11 @@
     box-shadow: $shadow-soft;
     overflow: auto;
     animation: hide math.div($dropdown-animation-timing, 2)  ease forwards;
+
+    @include up-to-mobile {
+      top: 75%;
+    }
+
     &:before {
       content: '';
       width: 0;
@@ -81,7 +86,7 @@
   &__option {
     a {
       display: block;
-      padding: $dropdown-padding;
+      padding: $dropdown-option-padding;
       color: rgba(black, .6);
       text-decoration: none;
       border-bottom: 1px solid $dropdown-option-border-bottom-color;
diff --git a/themes/conventional-commits/static/css/scss/layout/_header.scss b/themes/conventional-commits/static/css/scss/layout/_header.scss
index 4837a62..e598ac6 100644
--- a/themes/conventional-commits/static/css/scss/layout/_header.scss
+++ b/themes/conventional-commits/static/css/scss/layout/_header.scss
@@ -29,12 +29,36 @@
     display: flex;
     color: $color-neutral-light;
     list-style: none;
+    margin-left: $gap-sm * 2;
   }
 
   &__menu-item {
     margin-right: $gap-sm;
+
     &:last-child {
       margin-right: 0;
     }
   }
 }
+
+@include up-to-mobile {
+  .header {
+    .container {
+      align-items: flex-start;
+      height: auto;
+      margin-top: $gap-sm;
+    }
+
+
+    &__menu {
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: flex-end;
+      margin-top: $gap-sm * -1;
+    }
+
+    &__menu-item {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/themes/conventional-commits/static/css/scss/layout/_welcome.scss b/themes/conventional-commits/static/css/scss/layout/_welcome.scss
index 3ea4b90..de9ebe6 100644
--- a/themes/conventional-commits/static/css/scss/layout/_welcome.scss
+++ b/themes/conventional-commits/static/css/scss/layout/_welcome.scss
@@ -37,6 +37,11 @@
   &__title {
     font-size: 2.6em;
     margin-bottom: $gap-sm;
+
+    @include up-to-mobile {
+      word-break: break-all;
+    }
+
     @include desktop {
       width: 85%;
       font-size: 3.6em;