From 24a6cd99f2b6e7b067b3686c118356de1ecc425a Mon Sep 17 00:00:00 2001
From: Sasha Koshka <sashakoshka@tebibyte.media>
Date: Sat, 8 Oct 2022 21:27:33 -0400
Subject: [PATCH] Better responsiveness

---
 prototype/style.css | 38 +++++++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/prototype/style.css b/prototype/style.css
index f54b316..b54e31e 100644
--- a/prototype/style.css
+++ b/prototype/style.css
@@ -113,11 +113,7 @@ header {
 	padding: 1rem;
 }
 
-@media screen and not (min-width: 70rem) {
-	aside {
-		margin-bottom: 1rem;
-	}
-
+@media screen and not (min-width: 67rem) {
 	nav .buttonListWrap {
 		position: relative;
 	}
@@ -142,15 +138,13 @@ header {
 			transparent       0%,
 			var(--background) 100%);
 	}
+
+	nav > .buttonListWrap:last-child {
+		margin-top: 1rem;
+	}
 }
 
-@media screen and (min-width: 70rem) {
-	#contentWrap {
-		display: grid;
-		grid-gap: 1rem;
-		grid-template-columns: 24rem auto;
-	}
-	
+@media screen and (min-width: 67rem) {
 	nav {
 		display: grid;
 		grid-grid: 1rem;
@@ -162,6 +156,20 @@ header {
 	}
 }
 
+@media screen and not (min-width: 60rem) {
+	aside {
+		margin-bottom: 1rem;
+	}
+}
+
+@media screen and (min-width: 60rem) {
+	#contentWrap {
+		display: grid;
+		grid-gap: 2rem;
+		grid-template-columns: 24rem auto;
+	}
+}
+
 @media screen and (min-width: 80rem) {
 	#contentWrap {
 		grid-template-columns: 36rem auto;
@@ -176,12 +184,16 @@ header {
 
 .files tr {
 	display: grid;
-	grid-template-columns: 30% auto 30%;
+	grid-template-columns: 30% auto min-content;
+	gap: 1rem;
 }
 
 .files td {		
 	border: none;
 	padding: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 }
 
 .files td:last-child {