Layout improvements for small screens

1 files changed, 38 insertions, 2 deletions

diff --git a/resources/sass/style.scss b/resources/sass/style.scss
index b1a2075..874ed83 100644
--- a/resources/sass/style.scss
+++ b/resources/sass/style.scss
@@ -99,8 +99,8 @@ body {
 	font-size: larger;
 }
 
-.nowrap {
-	white-space: nowrap;
+.wrap-anywhere {
+	word-wrap: anywhere; /* utlity to prevent horizontal scrolling on small screens */
 }
 
 abbr {
@@ -183,6 +183,42 @@ table {
 	margin-bottom: 6px;
 }
 
+@media (max-width: 1269px) {
+	table.main_table {
+		tr {
+			display: block;
+		}
+
+		td:first-child {
+			display: block;
+			font-weight: bold;
+			min-width: unset !important;
+			text-align: initial !important;
+		}
+
+		td.icon {
+			min-width: 1.5em;
+		}
+
+		&.presentations > tbody > tr {
+			padding-bottom: 1ex;
+
+			td:nth-child(2) {
+				display: inline;
+				padding-right: 0;
+
+				&:after {
+					content: ': ';
+				}
+			}
+
+			td:last-child {
+				display: inline;
+			}
+		}
+	}
+}
+
 span.sc {
 	font-variant-caps: small-caps;
 }