1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 01:20:30 +00:00

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
This commit is contained in:
Mario Pietsch 2022-12-06 17:36:26 +01:00 committed by GitHub
parent 8d050e0e69
commit 2db886793e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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}] }}}/> <$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
\end \end
\define tiddler-width()
<$text text={{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}}/>
\end
\define if-fluid-fixed(text,hiddenSidebarText) \define if-fluid-fixed(text,hiddenSidebarText)
<$reveal state="$:/themes/tiddlywiki/vanilla/options/sidebarlayout" type="match" text="fluid-fixed"> <$reveal state="$:/themes/tiddlywiki/vanilla/options/sidebarlayout" type="match" text="fluid-fixed">
$text$ $text$
@ -144,7 +148,7 @@ pre {
display: block; display: block;
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
word-break: normal; word-break: break-word;
word-wrap: break-word; word-wrap: break-word;
white-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}}; white-space: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};
background-color: <<colour pre-background>>; 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-site-title,
.tc-titlebar { .tc-titlebar {
font-weight: normal; font-weight: normal;