fix: styling for small screens

Joxit · Jan 21, 2023 · 1bfbcbf · 1bfbcbf
1 parent e4369f4
commit 1bfbcbf
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/src/components/docker-registry-ui.riot b/src/components/docker-registry-ui.riot
@@ -214,6 +214,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       display: flex;
     }
 
+    material-navbar .nav-wrapper .menu {
+      flex-shrink: 1;
+    }
+
     material-footer {
       color: var(--footer-neutral-text);
       background-color: var(--footer-background);

diff --git a/src/components/search-bar.riot b/src/components/search-bar.riot
@@ -45,18 +45,13 @@
   <style>
     :host material-input {
       line-height: initial;
-      max-width: 20%;
-      min-width: 13em;
+      min-width: 5em;
     }
 
     @media screen and (max-width: 400px) {
       :host material-input {
         display: none;
       }
     }
-
-    :host material-input input {
-      color: #fff;
-    }
   </style>
 </search-bar>
diff --git a/src/style.scss b/src/style.scss
@@ -116,6 +116,12 @@ material-spinner {
   font-weight: 400;
 }
 
+@media screen and (max-width: 600px) {
+  .logo {
+    padding-left: 0;
+  }
+}
+
 h2 {
   padding: 16px;
   margin: auto;