theme/css/general.css: fix mobile page width

raindev · nazarien · ericonr · commit ee7ff820b9ca · 2021-03-07T19:12:34.000-03:00
Prevent tables from breaking mobile page width

Constrain tables to the page width and make content scrollable. Do not
restrict table size large screens (when navigation sidebar is displayed
by default).

Co-authored-by: Nazar Barchuk &lt;nazar.barchuk@gmail.com&gt;
diff --git a/src/theme/css/general.css b/src/theme/css/general.css
@@ -55,6 +55,8 @@ li.js-unavailable {
 
 table {
 	border-collapse: collapse;
+	display: block;
+	overflow-y: auto;
 }
 table td {
 	padding: 3px 20px;
@@ -267,8 +269,9 @@ body {
 	width: 100%;
 }
 #page-wrapper {
-	width: 100%;
-	padding: 0 10px;
+	--content-padding: 10px;
+	padding: 0 var(--content-padding);
+	width: calc(100% - var(--content-padding) * 2);
 }
 #search-wrapper,
 #page-wrapper main {
@@ -316,6 +319,9 @@ body {
 		display: flex;
 		flex-direction: column;
 	}
+	table {
+		display: table;
+	}
 }
 
 @media (prefers-color-scheme: dark) {

Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,8 @@ li.js-unavailable {`
`55`	`55`
`56`	`56`	`table {`
`57`	`57`	`border-collapse: collapse;`
	`58`	`+ display: block;`
	`59`	`+ overflow-y: auto;`
`58`	`60`	`}`
`59`	`61`	`table td {`
`60`	`62`	`padding: 3px 20px;`
`@@ -267,8 +269,9 @@ body {`
`267`	`269`	`width: 100%;`
`268`	`270`	`}`
`269`	`271`	`#page-wrapper {`
`270`		`- width: 100%;`
`271`		`- padding: 0 10px;`
	`272`	`+ --content-padding: 10px;`
	`273`	`+ padding: 0 var(--content-padding);`
	`274`	`+ width: calc(100% - var(--content-padding) * 2);`
`272`	`275`	`}`
`273`	`276`	`#search-wrapper,`
`274`	`277`	`#page-wrapper main {`
`@@ -316,6 +319,9 @@ body {`
`316`	`319`	`display: flex;`
`317`	`320`	`flex-direction: column;`
`318`	`321`	`}`
	`322`	`+ table {`
	`323`	`+ display: table;`
	`324`	`+ }`
`319`	`325`	`}`
`320`	`326`
`321`	`327`	`@media (prefers-color-scheme: dark) {`