From aedc564308c274d802055e78b9e9e9f59be83305 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 20 Feb 2026 22:14:29 +0100
Subject: [PATCH] Refactor inline style attributes (#36652)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is the result of a full-repo review to look for `style` attributes
that can be replaced with tailwind or other methods. I will manually
validate later.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 web_src/js/features/codeeditor.ts   | 22 +++++++++++-----------
 web_src/js/features/repo-actions.ts |  2 +-
 web_src/js/features/repo-editor.ts  |  4 ++--
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/web_src/js/features/codeeditor.ts b/web_src/js/features/codeeditor.ts
index b2aa9ea1c5e..dc3f2fad81b 100644
--- a/web_src/js/features/codeeditor.ts
+++ b/web_src/js/features/codeeditor.ts
@@ -1,6 +1,6 @@
 import {colord} from 'colord';
 import {basename, extname, isObject, isDarkTheme} from '../utils.ts';
-import {onInputDebounce} from '../utils/dom.ts';
+import {onInputDebounce, toggleElem} from '../utils/dom.ts';
 import type MonacoNamespace from 'monaco-editor';
 
 type Monaco = typeof MonacoNamespace;
@@ -197,19 +197,19 @@ function getFileBasedOptions(filename: string, lineWrapExts: string[]): MonacoOp
 }
 
 function togglePreviewDisplay(previewable: boolean): void {
+  // FIXME: here and below, the selector is too broad, it should only query in the editor related scope
   const previewTab = document.querySelector<HTMLElement>('a[data-tab="preview"]');
+  // the "preview tab" exists for "file code editor", but doesn't exist for "git hook editor"
   if (!previewTab) return;
 
-  if (previewable) {
-    previewTab.style.display = '';
-  } else {
-    previewTab.style.display = 'none';
-    // If the "preview" tab was active, user changes the filename to a non-previewable one,
-    // then the "preview" tab becomes inactive (hidden), so the "write" tab should become active
-    if (previewTab.classList.contains('active')) {
-      const writeTab = document.querySelector<HTMLElement>('a[data-tab="write"]');
-      writeTab?.click();
-    }
+  toggleElem(previewTab, previewable);
+  if (previewable) return;
+
+  // If not previewable but the "preview" tab was active (user changes the filename to a non-previewable one),
+  // then the "preview" tab becomes inactive (hidden), so the "write" tab should become active
+  if (previewTab.classList.contains('active')) {
+    const writeTab = document.querySelector<HTMLElement>('a[data-tab="write"]');
+    writeTab?.click(); // TODO: it shouldn't need null-safe operator, writeTab must exist
   }
 }
 
diff --git a/web_src/js/features/repo-actions.ts b/web_src/js/features/repo-actions.ts
index 8d93fce53f4..671eef7f3ed 100644
--- a/web_src/js/features/repo-actions.ts
+++ b/web_src/js/features/repo-actions.ts
@@ -8,7 +8,7 @@ export function initRepositoryActionView() {
   // TODO: the parent element's full height doesn't work well now,
   // but we can not pollute the global style at the moment, only fix the height problem for pages with this component
   const parentFullHeight = document.querySelector<HTMLElement>('body > div.full.height');
-  if (parentFullHeight) parentFullHeight.style.paddingBottom = '0';
+  if (parentFullHeight) parentFullHeight.classList.add('tw-pb-0');
 
   const view = createApp(RepoActionView, {
     runIndex: el.getAttribute('data-run-index'),
diff --git a/web_src/js/features/repo-editor.ts b/web_src/js/features/repo-editor.ts
index 93595c385e0..b100cd7c914 100644
--- a/web_src/js/features/repo-editor.ts
+++ b/web_src/js/features/repo-editor.ts
@@ -113,8 +113,8 @@ export function initRepoEditor() {
         warningDiv = document.createElement('div');
         warningDiv.classList.add('ui', 'warning', 'message', 'flash-message', 'flash-warning', 'space-related');
         warningDiv.innerHTML = html`<p>File path contains leading or trailing whitespace.</p>`;
-        // Add display 'block' because display is set to 'none' in formantic\build\semantic.css
-        warningDiv.style.display = 'block';
+        // Change to `block` display because it is set to 'none' in fomantic/build/semantic.css
+        warningDiv.classList.add('tw-block');
         const inputContainer = document.querySelector('.repo-editor-header')!;
         inputContainer.insertAdjacentElement('beforebegin', warningDiv);
       }