feat(cgit.css): Improve handling of small screens

1 files changed, 15 insertions, 1 deletions

diff --git a/cgit.css b/cgit.css
index b2b0a9f..6bb27b3 100644
--- a/cgit.css
+++ b/cgit.css
@@ -92,7 +92,6 @@ div#cgit table#header td.logo img {
 div#cgit table#header td.main {
   font-size: 250%;
   padding-left: 10px;
-  white-space: nowrap;
   background-color: /*--gray-2*/#262626;
   color: /*--red-2*/#f57f6c;
 }
@@ -145,6 +144,12 @@ div#cgit table.tabs td a {
   font-size: 110%;
 }
 
+@media screen and (max-width: 779px) {
+  div#cgit table.tabs td a {
+    display: inline-block;
+  }
+}
+
 div#cgit table.tabs td a.active {
   background-color: /*--indigo*/#4a4a99;
   border-top-left-radius: /*--radius-medium*/4px;
@@ -166,6 +171,14 @@ div#cgit table.tabs td.form select {
   font-size: 90%;
 }
 
+@media screen and (max-width: 779px) {
+  div#cgit table.tabs td.form form,
+  div#cgit table#header td.form,
+  div#cgit table#header td.main {
+    white-space: wrap;
+  }
+}
+
 div#cgit input,
 div#cgit select,
 div#cgit a.button {
@@ -1251,6 +1264,7 @@ div#readme a, div#cgit div.markdown-body a {
   box-sizing: border-box;
   border: 1px solid #978a42;
   background-color: #303030;
+  white-space: break-spaces;
 }
 
 .markdown-body h1, .markdown-body h1 a,