Improve channel and account display on medium devices

2 files changed, 19 insertions, 5 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c8966d22b..11e5c16c3 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -77,10 +77,6 @@ input, textarea {
   color: var(--mainForegroundColor);
 }
 
-.btn-outline-secondary {
-  border-color: $input-border-color;
-}
-
 label {
   font-weight: $font-bold;
   font-size: 15px;
@@ -108,7 +104,7 @@ label {
 }
 
 .row {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .main-col {
@@ -280,6 +276,7 @@ table {
 
       .sub-menu {
         padding-left: 50px;
+        padding-right: 50px;
 
         .title-page {
           font-size: 17px;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index e8c4528f4..e13e0bff6 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -221,10 +221,23 @@ ngb-tooltip-window {
   z-index: z(tooltip) !important;
 }
 
+.btn-outline-secondary {
+  border-color: $input-border-color;
+
+  &:focus-within,
+  &:focus,
+  &:hover {
+    color: #fff;
+    background-color: #6c757d;
+  }
+}
+
 .btn-outline-tertiary {
   color: var(--secondaryColor);
   border-color: var(--secondaryColor);
 
+  &:focus-within,
+  &:focus,
   &:hover {
     color: var(--mainBackgroundColor);
     background-color: var(--secondaryColor);
@@ -247,3 +260,7 @@ ngb-tooltip-window {
     }
   }
 }
+
+.input-group > .form-control {
+  flex: initial;
+}