From a4cb1a6e7089dccdc65649ed96c063e1afe12ce7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 25 Sep 2022 14:23:26 +0200
Subject: [PATCH 1/4] Use native inputs in whitespace dropdown

---
 templates/repo/diff/whitespace_dropdown.tmpl | 16 ++++++++--------
 web_src/less/helpers.less                    |  3 +++
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/templates/repo/diff/whitespace_dropdown.tmpl b/templates/repo/diff/whitespace_dropdown.tmpl
index 9df79dab739c..390254630da2 100644
--- a/templates/repo/diff/whitespace_dropdown.tmpl
+++ b/templates/repo/diff/whitespace_dropdown.tmpl
@@ -3,20 +3,20 @@
 	{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	<div class="menu">
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all">
-			<i class="circle {{if eq .WhitespaceBehavior "show-all"}}dot{{else}}outline{{end}} icon"></i>
-			{{.locale.Tr "repo.diff.whitespace_show_everything"}}
+			<input id="whitespace-show-all" class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}>
+			<label for="whitespace-show-all" class="pointer-events-none">{{.locale.Tr "repo.diff.whitespace_show_everything"}}</label>
 		</a>
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-all">
-			<i class="circle {{if eq .WhitespaceBehavior "ignore-all"}}dot{{else}}outline{{end}} icon"></i>
-			{{.locale.Tr "repo.diff.whitespace_ignore_all_whitespace"}}
+			<input id="whitespace-ignore-all" class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}>
+			<label for="whitespace-ignore-all" class="pointer-events-none">{{.locale.Tr "repo.diff.whitespace_ignore_all_whitespace"}}<label>
 		</a>
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-change">
-			<i class="circle {{if eq .WhitespaceBehavior "ignore-change"}}dot{{else}}outline{{end}} icon"></i>
-			{{.locale.Tr "repo.diff.whitespace_ignore_amount_changes"}}
+			<input id="whitespace-ignore-change" class="mr-3 pen" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
+			<label for="whitespace-ignore-change" class="pen">{{.locale.Tr "repo.diff.whitespace_ignore_amount_changes"}}</label>
 		</a>
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-eol">
-			<i class="circle {{if eq .WhitespaceBehavior "ignore-eol"}}dot{{else}}outline{{end}} icon"></i>
-			{{.locale.Tr "repo.diff.whitespace_ignore_at_eol"}}
+			<input id="whitespace-ignore-eol" class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}>
+			<label for="whitespace-ignore-eol" class="pointer-events-none">{{.locale.Tr "repo.diff.whitespace_ignore_at_eol"}}</label>
 		</a>
 	</div>
 </div>
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 5510ee5b236c..eb28d9df02ad 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -19,6 +19,9 @@
 .h-100 { height: 100% !important; }
 .br-0 { border-radius: 0 !important; }
 
+/* below class names match tailwind.css */
+.pointer-events-none { pointer-events: none !important; }
+
 .mono {
   font-family: var(--fonts-monospace) !important;
   font-size: .9em !important; /* compensate for monospace fonts being usually slightly larger */

From 58ec4820a4c8554d1bb954a0fc58b39ab387b78e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 25 Sep 2022 14:51:46 +0200
Subject: [PATCH 2/4] use nesting

---
 templates/repo/diff/whitespace_dropdown.tmpl | 24 +++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/templates/repo/diff/whitespace_dropdown.tmpl b/templates/repo/diff/whitespace_dropdown.tmpl
index 390254630da2..c9310fc454c2 100644
--- a/templates/repo/diff/whitespace_dropdown.tmpl
+++ b/templates/repo/diff/whitespace_dropdown.tmpl
@@ -3,20 +3,28 @@
 	{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	<div class="menu">
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all">
-			<input id="whitespace-show-all" class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}>
-			<label for="whitespace-show-all" class="pointer-events-none">{{.locale.Tr "repo.diff.whitespace_show_everything"}}</label>
+			<label class="pointer-events-none">
+				<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}>
+				{{.locale.Tr "repo.diff.whitespace_show_everything"}}
+			</label>
 		</a>
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-all">
-			<input id="whitespace-ignore-all" class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}>
-			<label for="whitespace-ignore-all" class="pointer-events-none">{{.locale.Tr "repo.diff.whitespace_ignore_all_whitespace"}}<label>
+			<label class="pointer-events-none">
+				<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}>
+				{{.locale.Tr "repo.diff.whitespace_ignore_all_whitespace"}}
+				<label>
 		</a>
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-change">
-			<input id="whitespace-ignore-change" class="mr-3 pen" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
-			<label for="whitespace-ignore-change" class="pen">{{.locale.Tr "repo.diff.whitespace_ignore_amount_changes"}}</label>
+			<label class="pen">
+				<input class="mr-3 pen" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
+				{{.locale.Tr "repo.diff.whitespace_ignore_amount_changes"}}
+			</label>
 		</a>
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-eol">
-			<input id="whitespace-ignore-eol" class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}>
-			<label for="whitespace-ignore-eol" class="pointer-events-none">{{.locale.Tr "repo.diff.whitespace_ignore_at_eol"}}</label>
+			<label class="pointer-events-none">
+				<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}>
+				{{.locale.Tr "repo.diff.whitespace_ignore_at_eol"}}
+			</label>
 		</a>
 	</div>
 </div>

From bfaeaa6f81c97ba98a76831162f31b6068f43700 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 25 Sep 2022 14:52:55 +0200
Subject: [PATCH 3/4] fix class

---
 templates/repo/diff/whitespace_dropdown.tmpl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/repo/diff/whitespace_dropdown.tmpl b/templates/repo/diff/whitespace_dropdown.tmpl
index c9310fc454c2..47a5ab5533c3 100644
--- a/templates/repo/diff/whitespace_dropdown.tmpl
+++ b/templates/repo/diff/whitespace_dropdown.tmpl
@@ -15,8 +15,8 @@
 				<label>
 		</a>
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-change">
-			<label class="pen">
-				<input class="mr-3 pen" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
+			<label class="pointer-events-none">
+				<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
 				{{.locale.Tr "repo.diff.whitespace_ignore_amount_changes"}}
 			</label>
 		</a>

From 3745b07c8673b1b1ebf05670de7845b05880b7e9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 25 Sep 2022 14:54:39 +0200
Subject: [PATCH 4/4] correctly spell tailwind css

---
 web_src/less/helpers.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index eb28d9df02ad..19477f7ecd67 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -19,7 +19,7 @@
 .h-100 { height: 100% !important; }
 .br-0 { border-radius: 0 !important; }
 
-/* below class names match tailwind.css */
+/* below class names match Tailwind CSS */
 .pointer-events-none { pointer-events: none !important; }
 
 .mono {