Design fallout patch 9 (#1337)

ui/scss/component/_file-drop.scss

@@ -4,7 +4,7 @@
   position: fixed;
   background: var(--color-background-overlay);
   opacity: 0;
-  height: 20%;
+  height: 32%;
   width: 100%;
   overflow: hidden;
   pointer-events: none;
@@ -15,6 +15,8 @@
   align-items: center;
   justify-content: center;
 
+  color: #fff;
+
   &.file-drop--show {
     opacity: 1;
     pointer-events: all;

ui/scss/component/_media.scss

@@ -252,7 +252,7 @@
 
         .button__label {
           margin: 0;
-          margin-top: 2px;
+          margin-top: 1px;
           margin-left: var(--spacing-xxxs);
           font-size: var(--font-small);
         }

ui/scss/component/_search.scss

@@ -125,6 +125,10 @@
   margin-bottom: 0;
   margin-top: var(--spacing-xs);
 
+  .button:not(:last-child) {
+    margin-right: var(--spacing-s);
+  }
+
   @media (min-width: $breakpoint-small) {
     margin-top: 0;
   }

ui/scss/component/_wunderbar.scss

@@ -309,14 +309,11 @@
 
 .wunderbar__tag-search {
   .tag {
-    //display: flex;
-    //align-items: center;
     height: 1.2rem;
     margin-left: var(--spacing-xxs);
     color: var(--color-odysee-contrast);
     background-color: var(--color-odysee);
 
-    //padding-right:60px;
     padding-top: 1px;
 
     overflow: hidden;
@@ -354,6 +351,24 @@
   [data-reach-combobox-option]:last-of-type {
     margin-bottom: 0px;
   }
+
+  @media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium) {
+    // background-color:#ff0000;
+    flex-direction: column;
+    padding-left: var(--spacing-xxs);
+    padding-right: var(--spacing-xxs);
+    .wunderbar__more-results {
+      width: 100% !important;
+      .button {
+        width: 100% !important;
+      }
+    }
+    .wunderbar__tag-search {
+      .tag {
+        max-width: 100%;
+      }
+    }
+  }
 }
 
 [data-reach-combobox-option] {

ui/scss/component/section.scss

@@ -380,3 +380,9 @@
   border-radius: 5px;
   vertical-align: middle;
 }
+
+.section {
+  .help {
+    color: var(--color-text);
+  }
+}

ui/scss/init/_gui.scss

@@ -627,6 +627,27 @@ img {
 .homePage-wrapper__section-title {
   display: flex;
   justify-content: space-between;
+
+  @media (max-width: $breakpoint-small) {
+    button {
+      right: calc(var(--spacing-xs) * -1);
+      .button__content {
+        padding: 10px;
+        background-color: var(--color-header-background);
+        height: unset;
+        border-radius: 50% 0 0 50%;
+
+        .icon {
+          margin-left: 0;
+          width: 22px;
+          height: 22px;
+        }
+      }
+      .button__label {
+        display: none;
+      }
+    }
+  }
 }
 
 // The following wrapper classes are temporary to fix page specific issues