Fix button/input/select heights

3 files changed, 22 insertions, 14 deletions

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0f301dab2..cafe830fe 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -91,8 +91,16 @@
   }
 }
 
-@mixin peertube-input-text($width) {
-  padding: 4px 15px;
+@mixin rounded-line-height-1-5 ($font-size) {
+  line-height: $font-size + math.round(math.div($font-size, 2));
+}
+
+@mixin peertube-input-text($width, $font-size: $form-input-font-size) {
+  @include rounded-line-height-1-5($font-size);
+
+  font-size: $font-size;
+
+  padding: 3px 15px;
   display: inline-block;
   width: $width;
   max-width: $width;
@@ -100,8 +108,6 @@
   background-color: pvar(--inputBackgroundColor);
   border: 1px solid pvar(--inputBorderColor);
   border-radius: 3px;
-  font-size: $form-input-font-size;
-  line-height: $form-input-line-height;
 
   &::placeholder {
     color: pvar(--inputPlaceholderColor);
@@ -252,6 +258,8 @@
 }
 
 @mixin peertube-button {
+  @include rounded-line-height-1-5($button-font-size);
+
   padding: 4px 13px;
 
   border: 0;
@@ -264,7 +272,6 @@
   cursor: pointer;
 
   font-size: $button-font-size;
-  line-height: $button-font-size + math.round(math.div($button-font-size, 2));
 
   my-global-icon + * {
     @include margin-right(4px);
@@ -314,10 +321,6 @@
     width: $width;
     top: $top;
   }
-
-  span {
-    vertical-align: middle;
-  }
 }
 
 @mixin peertube-file {
@@ -408,15 +411,17 @@
   }
 
   select {
-    padding: 4px 35px 4px 12px;
+    @include rounded-line-height-1-5($form-input-font-size);
+
+    font-size: $form-input-font-size;
+
+    padding: 3px 35px 3px 12px;
     position: relative;
     border: 1px solid pvar(--inputBorderColor);
     background: transparent none;
     appearance: none;
     text-overflow: ellipsis;
     color: pvar(--mainForegroundColor);
-    font-size: $form-input-font-size;
-    line-height: $form-input-line-height;
 
     &:focus {
       outline: none;
@@ -443,6 +448,9 @@
       font-weight: $font-semibold;
       color: pvar(--greyForegroundColor);
       border: 0;
+
+      // No border, add +1 to vertical padding
+      padding: 4px 35px 4px 12px;
     }
   }
 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 8358270da..1eb3135f4 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -96,7 +96,6 @@ $activated-action-button-color: #212529;
 
 $focus-box-shadow-form: 0 0 0 .2rem;
 $form-input-font-size: 15px;
-$form-input-line-height: 1.4;
 
 $video-watch-player-factor: math.div(16, 9);
 $video-watch-info-margin-left: 44px;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 55494a556..a9455b38b 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -35,8 +35,9 @@ $ng-select-input-text: pvar(--mainForegroundColor);
 @import '@ng-select/ng-select/scss/default.theme';
 
 .ng-select {
+  @include rounded-line-height-1-5($ng-select-value-font-size);
+
   font-size: $ng-select-value-font-size;
-  line-height: $form-input-line-height;
 
   &.ng-select-focused {
     &:not(.ng-select-opened) > .ng-select-container {