fix: Adapted the tabbing layout to flexboxes to improve versatility on mobile devices.

1 files changed, 10 insertions, 9 deletions

diff --git a/cgit.css b/cgit.css
index 3996db4..415714a 100644
--- a/cgit.css
+++ b/cgit.css
@@ -71,6 +71,7 @@ div#cgit table#header tr {
 }
 div#cgit table#header tbody td.form {
 	padding-top: 0.1rem;
+	padding-bottom: 0.3rem;
 }
 }
 @media(width > 40rem) {
@@ -132,26 +133,28 @@ div#cgit table.tabs::-webkit-scrollbar {
 
 div#cgit table.tabs {
 	display: block;
-	mask-image: linear-gradient(to right, black 0, black calc(100% - 4rem), transparent 100%);
-	overflow-x: scroll;
-	overflow-y: hidden;
+	overflow: auto;
 	-ms-overflow-style: none;  /* IE and Edge */
   	scrollbar-width: none;  /* Firefox */
 	border-bottom: solid 1px #777;
 	border-collapse: collapse;
-	padding-right: 3rem;
 	margin-top: 2em;
 	margin-bottom: 0px;
 	width: 100%;
 }
+div#cgit table.tabs tbody {
+	width: 100%;
+	display: inline-block;
+}
+div#cgit table.tabs tr {
+	display: flex;
+	justify-content: space-between;
+}
 
 div#cgit table.tabs td {
 	padding: 0px 1em;
 	vertical-align: bottom;
 }
-div#cgit table.tabs tr td:first-child {
-	min-width: calc(100vw - 26em);
-}
 
 div#cgit table.tabs td a {
 	padding: 2px 0.75em;
@@ -176,7 +179,6 @@ div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https
 
 div#cgit table.tabs td.form {
 	text-align: right;
-	width: 16em;
 }
 
 div#cgit td.form input {
@@ -590,7 +592,6 @@ div#cgit table.commit-info td {
 }
 
 div#cgit div.commit-subject {
-	font-weight: bold;
 	font-size: 125%;
 	margin: 1.5em 0em 0.5em 0em;
 	padding: 0em;