fix: version selector position

Author: berezinant

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss

@@ -72,6 +72,8 @@
   &_dropdown {
     padding: var(--size-s2);
 
+    font: var(--font-text-s);
+
     &::after {
       display: block;
 

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss

@@ -21,6 +21,8 @@
 
     overflow-y: auto;
 
+    width: fit-content;
+
     min-width: 272px;
     max-width: 360px;
     max-height: 400px;
@@ -54,6 +56,10 @@
 
     &_positioned_left {
       left: 0;
+
+      @media (width < $breakpoint-desktop-min) {
+        left: unset;
+      }
     }
 
     &_expanded {

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/styles.scss

@@ -4,6 +4,10 @@
 @import '../_tokens/index';
 
 .library-version {
+  box-sizing: border-box;
+
+  padding-top: 1px;
+
   color: var(--color-text-dt);
 
   font: var(--font-text-s);
@@ -14,6 +18,8 @@
 
     height: 52px;
 
+    padding-left: 12px;
+
     background-color: var(--color-text);
   }
 }

dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css

@@ -149,6 +149,7 @@
 
 .button_dropdown {
   padding: var(--size-s2);
+  font: var(--font-text-s);
 }
 
 .button_dropdown::after {
@@ -411,6 +412,7 @@
   right: 0;
   display: none;
   overflow-y: auto;
+  width: fit-content;
   min-width: 272px;
   max-width: 360px;
   max-height: 400px;
@@ -444,6 +446,11 @@
   left: 0;
 }
 
+@media (width < 900px) {
+  .dropdown--list_positioned_left {
+    left: unset;
+  }
+}
 .dropdown--list_expanded {
   display: block;
 }
@@ -1042,6 +1049,8 @@
 }
 
 .library-version {
+  box-sizing: border-box;
+  padding-top: 1px;
   color: var(--color-text-dt);
   font: var(--font-text-s);
 }
@@ -1051,6 +1060,7 @@
     display: flex;
     align-items: center;
     height: 52px;
+    padding-left: 12px;
     background-color: var(--color-text);
   }
 }

dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.css

@@ -3,13 +3,13 @@
  */
 
 .versions-dropdown {
-  margin-left: var(--size-s2);
   white-space: nowrap;
 }
 
 @media (width < 900px) {
   .versions-dropdown {
     height: 52px;
+    margin-left: -8px;
   }
 }