diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl
index 838c6893a4..8e769790b2 100644
--- a/templates/devtest/fomantic-modal.tmpl
+++ b/templates/devtest/fomantic-modal.tmpl
@@ -2,13 +2,15 @@
 <div class="page-content devtest ui container">
 	{{template "base/alert" .}}
 	<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
-	<script type="module">
-		for (const el of $('.ui.modal:not([data-skip-button])')) {
-			const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
-				$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
-			});
-			$('.modal-buttons').append($btn);
-		}
+	<script>
+		document.addEventListener('gitea:index-ready', () => {
+			for (const el of $('.ui.modal:not([data-skip-button])')) {
+				const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
+					$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
+				});
+				$('.modal-buttons').append($btn);
+			}
+		});
 	</script>
 
 	<div id="test-modal-form-1" class="ui mini modal">
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 7a435cc433..cb5aad7b0c 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -45,14 +45,16 @@
 					</div>
 				</li>
 			</ul>
-			<script type="module">
-				const $buttons = $('#devtest-button-samples').find('button.ui');
+			<script>
+				document.addEventListener('gitea:index-ready', () => {
+					const $buttons = $('#devtest-button-samples').find('button.ui');
 
-				const $buttonStyles = $('input[name*="button-style"]');
-				$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
+					const $buttonStyles = $('input[name*="button-style"]');
+					$buttonStyles.on('click', () => $buttonStyles.map((_, el) => $buttons.toggleClass(el.value, el.checked)));
 
-				const $buttonStates = $('input[name*="button-state"]');
-				$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
+					const $buttonStates = $('input[name*="button-state"]');
+					$buttonStates.on('click', () => $buttonStates.map((_, el) => $buttons.prop(el.value, el.checked)));
+				});
 			</script>
 		</div>
 	</div>
diff --git a/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl b/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
index ab8600b068..6168b06e17 100644
--- a/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
+++ b/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
@@ -2,35 +2,28 @@
 	{{if and .CanUseTimetracker (not .Repository.IsArchived)}}
 		<div class="divider"></div>
 		<div>
-			<div class="ui dropdown full-width jump">
-				<a class="fixed-text muted">
-					<div>
-						<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong>
-						{{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
-					</div>
-					{{svg "octicon-gear"}}
-				</a>
-				<div class="menu">
-					<a class="item issue-set-time-estimate show-modal" data-modal="#issue-time-set-estimate-modal">
-						{{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.time_estimate_set"}}
-					</a>
-					<div class="divider"></div>
-					{{if $.IsStopwatchRunning}}
-					<a class="item issue-stop-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/stop">
-						{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_stop"}}
-					</a>
-					<a class="item issue-cancel-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/cancel">
-						{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_discard"}}
-					</a>
-					{{else}}
-					<a class="item issue-start-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/start">
-						{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_start"}}
-					</a>
-					<a class="item issue-add-time show-modal" data-modal="#issue-time-manually-add-modal">
-						{{svg "octicon-plus"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_manually_add"}}
-					</a>
-					{{end}}
-				</div>
+			<div class="flex-text-block">
+				<strong class="tw-flex-1">{{ctx.Locale.Tr "repo.issues.tracker"}}</strong>
+				<button class="btn interact-fg show-modal" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.time_estimate_set"}}" data-modal="#issue-time-set-estimate-modal">
+					{{svg "octicon-pencil"}}
+				</button>
+			</div>
+			<div class="ui buttons tw-mt-2 tw-w-full">
+			{{if $.IsStopwatchRunning}}
+				<button class="ui button tw-flex-1 issue-stop-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/stop">
+					{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_stop"}}
+				</button>
+				<button class="ui icon button issue-cancel-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/cancel" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.timetracker_timer_discard"}}">
+					{{svg "octicon-trash"}}
+				</button>
+			{{else}}
+				<button class="ui button tw-flex-1 issue-start-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/start">
+					{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_start"}}
+				</button>
+				<button class="ui icon button issue-add-time show-modal" data-modal="#issue-time-manually-add-modal" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.timetracker_timer_manually_add"}}">
+					{{svg "octicon-plus"}}
+				</button>
+			{{end}}
 			</div>
 
 			{{if and (not $.IsStopwatchRunning) .HasUserStopwatch}}
@@ -74,23 +67,19 @@
 		</div>
 	{{end}}
 	{{if .WorkingUsers}}
-		<div class="ui comments tw-mt-2">
+		<div class="tw-mt-2">
 			{{ctx.Locale.Tr "repo.issues.time_spent_from_all_authors" ($.Issue.TotalTrackedTime | Sec2Hour)}}
-			<div>
-				{{range $user, $trackedtime := .WorkingUsers}}
-					<div class="comment tw-mt-2">
-						<a class="avatar">
-							{{ctx.AvatarUtils.Avatar $user}}
-						</a>
-						<div class="content">
-							{{template "shared/user/authorlink" $user}}
-							<div class="text">
-								{{$trackedtime|Sec2Hour}}
-							</div>
-						</div>
+		</div>
+		<div class="ui list flex-items-block">
+			{{range $user, $trackedtime := .WorkingUsers}}
+				<div class="item tw-gap-3">
+					{{template "shared/user/avatarlink" dict "user" $user}}
+					<div>
+						{{template "shared/user/authorlink" $user}}
+						<div class="text">{{$trackedtime|Sec2Hour}}</div>
 					</div>
-				{{end}}
-			</div>
+				</div>
+			{{end}}
 		</div>
 	{{end}}
 {{end}}
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index b105bb5de2..8e3309474b 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -366,8 +366,8 @@ It needs some tricks to tweak the left/right borders with active state */
 
 .ui.buttons .button {
   border-right: none;
-  flex: 1 0 auto;
   border-radius: 0;
+  flex-shrink: 0;
   margin: 0;
 }
 .ui.buttons .button:first-child {
diff --git a/web_src/js/index-domready.ts b/web_src/js/index-domready.ts
index 4d7ab98db0..ca18d1e828 100644
--- a/web_src/js/index-domready.ts
+++ b/web_src/js/index-domready.ts
@@ -175,3 +175,5 @@ const initDur = performance.now() - initStartTime;
 if (initDur > 500) {
   console.error(`slow init functions took ${initDur.toFixed(3)}ms`);
 }
+
+document.dispatchEvent(new CustomEvent('gitea:index-ready'));
diff --git a/web_src/js/standalone/devtest.ts b/web_src/js/standalone/devtest.ts
index e6baf6c9ce..faa38dc467 100644
--- a/web_src/js/standalone/devtest.ts
+++ b/web_src/js/standalone/devtest.ts
@@ -11,4 +11,5 @@ function initDevtestToast() {
   }
 }
 
+// NOTICE: keep in mind that this file is not in "index.js", they do not share the same module system.
 initDevtestToast();