From 480e4e2ce923320819b08888240364e04b545d5e Mon Sep 17 00:00:00 2001
From: Simon Huber <huber.simon@protonmail.com>
Date: Sun, 8 Nov 2020 23:30:31 +0100
Subject: [PATCH] Make fieldvalue-input a bit larger when viewport is narrow
 (#5007)

* Make field-value input display a bit larger when narrow

* Update base.tid

* Update base.tid

* Update base.tid
---
 themes/tiddlywiki/vanilla/base.tid | 33 ++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index b6fe7b94c..4e44bcc1b 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -21,6 +21,14 @@ background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`
 </$set>
 \end
 
+\define sidebarbreakpoint()
+<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>
+\end
+
+\define sidebarbreakpoint-minus-one()
+<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
+\end
+
 \define if-fluid-fixed(text,hiddenSidebarText)
 <$reveal state="$:/themes/tiddlywiki/vanilla/options/sidebarlayout" type="match" text="fluid-fixed">
 $text$
@@ -626,7 +634,7 @@ button svg.tc-image-button, button .tc-image-button img {
 	background: <<colour tiddler-info-background>>;
 }
 
-@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+@media (max-width: <<sidebarbreakpoint-minus-one>>) {
 
 	.tc-unfold-banner {
 		position: static;
@@ -834,7 +842,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	position: relative;
 }
 
-@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+@media (max-width: <<sidebarbreakpoint-minus-one>>) {
 
 	.tc-sidebar-header {
 		padding: 14px;
@@ -848,7 +856,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	}
 }
 
-@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+@media (min-width: <<sidebarbreakpoint>>) {
 
 	.tc-message-box {
 		margin: 21px -21px 21px -21px;
@@ -956,7 +964,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 .tc-view-field-value {
 }
 
-@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+@media (max-width: <<sidebarbreakpoint-minus-one>>) {
 	.tc-tiddler-frame {
 		padding: 14px 14px 14px 14px;
 	}
@@ -966,7 +974,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	}
 }
 
-@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+@media (min-width: <<sidebarbreakpoint>>) {
 	.tc-tiddler-frame {
 		padding: 28px 42px 42px 42px;
 		width: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}};
@@ -1225,7 +1233,7 @@ html body.tc-body.tc-single-tiddler-window {
 ** Adjustments for fluid-fixed mode
 */
 
-@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+@media (min-width: <<sidebarbreakpoint>>) {
 
 <<if-fluid-fixed text:"""
 
@@ -1435,7 +1443,14 @@ html body.tc-body.tc-single-tiddler-window {
 
 .tc-edit-field-add-value {
 	display: inline-block;
-	width: 35%;
+}
+
+@media (min-width: <<sidebarbreakpoint>>) {
+
+	.tc-edit-field-add-value {
+		width: 35%;
+	}
+
 }
 
 .tc-edit-field-add-button {
@@ -1457,7 +1472,7 @@ html body.tc-body.tc-single-tiddler-window {
 	width: 100%;
 }
 
-@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+@media (min-width: <<sidebarbreakpoint>>) {
 
 	.tc-storyview-zoomin-tiddler {
 		width: calc(100% - 84px);
@@ -2087,7 +2102,7 @@ html body.tc-body.tc-single-tiddler-window {
 	color: <<colour alert-highlight>>;
 }
 
-@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+@media (min-width: <<sidebarbreakpoint>>) {
 
 	.tc-static-alert {
 		position: relative;