From 2db886793e095ef3040cae197936356b0f474ccd Mon Sep 17 00:00:00 2001
From: Mario Pietsch <pmariojo@gmail.com>
Date: Tue, 6 Dec 2022 17:36:26 +0100
Subject: [PATCH] Fix table overflow for small screens (#7010)

* fix table overflow for small screens

* add PRE word-break for Chrome and Safari on mobile

* remove comment, since it looks better for all browsers now

* add 1 space to trigger the new automatic build

* change small screen settings only for tiddler frame
---
 themes/tiddlywiki/vanilla/base.tid | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index c323a6f19..d2fe757f6 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -30,6 +30,10 @@ background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`
 <$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
 \end
 
+\define tiddler-width()
+	<$text text={{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}}/>
+\end
+
 \define if-fluid-fixed(text,hiddenSidebarText)
 <$reveal state="$:/themes/tiddlywiki/vanilla/options/sidebarlayout" type="match" text="fluid-fixed">
 $text$
@@ -144,7 +148,7 @@ pre {
 	display: block;
 	margin-top: 1em;
 	margin-bottom: 1em;
-	word-break: normal;
+	word-break: break-word;
 	word-wrap: break-word;
 	white-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};
 	background-color: <<colour pre-background>>;
@@ -1173,6 +1177,28 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	}
 }
 
+
+/* prevent overflow for table content for small screens*/
+@media (max-width: <<sidebarbreakpoint>>) {
+	.tc-tiddler-frame tr {
+		word-wrap: anywhere;
+	}
+
+	.tc-tiddler-frame table blockquote {
+		margin-left: 12.5px;
+		margin-right: 12.5px; 
+	}
+
+	.tc-tiddler-frame table dd {
+		margin-left: 12.5px;
+	}
+
+	.tc-tiddler-frame table ol,
+	.tc-tiddler-frame table ul {
+		padding-left: 20px;
+	}
+}
+
 .tc-site-title,
 .tc-titlebar {
 	font-weight: normal;