From aef39d88b0a0382d3c17e563c5f0f2f39eabd8f9 Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Fri, 22 Aug 2025 14:21:40 -0700
Subject: [PATCH 1/2] remove quicktipsview.scss

---
 frontend/app/view/quicktipsview/quicktipsview.scss | 8 --------
 frontend/app/view/quicktipsview/quicktipsview.tsx  | 3 +--
 2 files changed, 1 insertion(+), 10 deletions(-)
 delete mode 100644 frontend/app/view/quicktipsview/quicktipsview.scss

diff --git a/frontend/app/view/quicktipsview/quicktipsview.scss b/frontend/app/view/quicktipsview/quicktipsview.scss
deleted file mode 100644
index 6b22bbc311..0000000000
--- a/frontend/app/view/quicktipsview/quicktipsview.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-.quicktips-view {
-    padding: 10px 5px;
-    overflow: auto;
-    width: 100%;
-}
diff --git a/frontend/app/view/quicktipsview/quicktipsview.tsx b/frontend/app/view/quicktipsview/quicktipsview.tsx
index 118c4f17e6..edbf8e02cb 100644
--- a/frontend/app/view/quicktipsview/quicktipsview.tsx
+++ b/frontend/app/view/quicktipsview/quicktipsview.tsx
@@ -4,7 +4,6 @@
 import { QuickTips } from "@/app/element/quicktips";
 import { globalStore } from "@/app/store/global";
 import { Atom, atom, PrimitiveAtom } from "jotai";
-import "./quicktipsview.scss";
 
 class QuickTipsViewModel implements ViewModel {
     viewType: string;
@@ -27,7 +26,7 @@ class QuickTipsViewModel implements ViewModel {
 
 function QuickTipsView({ model }: { model: QuickTipsViewModel }) {
     return (
-        <div className="quicktips-view">
+        <div className="px-[5px] py-[10px] overflow-auto w-full">
             <QuickTips />
         </div>
     );

From 14da32b740161167cfe68c72d30faf319051928f Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Fri, 22 Aug 2025 14:27:38 -0700
Subject: [PATCH 2/2] remove some view scss files (convert to tailwind)

---
 frontend/app/view/codeeditor/codeeditor.scss | 29 -----------------
 frontend/app/view/codeeditor/codeeditor.tsx  |  5 ++-
 frontend/app/view/helpview/helpview.scss     | 12 -------
 frontend/app/view/helpview/helpview.tsx      |  3 +-
 frontend/app/view/sysinfo/sysinfo.scss       | 33 --------------------
 frontend/app/view/sysinfo/sysinfo.tsx        |  7 ++---
 frontend/tailwindsetup.css                   | 16 ++++++++++
 7 files changed, 22 insertions(+), 83 deletions(-)
 delete mode 100644 frontend/app/view/codeeditor/codeeditor.scss
 delete mode 100644 frontend/app/view/helpview/helpview.scss
 delete mode 100644 frontend/app/view/sysinfo/sysinfo.scss

diff --git a/frontend/app/view/codeeditor/codeeditor.scss b/frontend/app/view/codeeditor/codeeditor.scss
deleted file mode 100644
index c5896e0582..0000000000
--- a/frontend/app/view/codeeditor/codeeditor.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-.code-editor-wrapper {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    align-items: center;
-    justify-content: center;
-
-    .code-editor {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        width: 100%;
-
-        .monaco-editor .slider {
-            background: rgba(255, 255, 255, 0.4);
-            border-radius: 4px;
-            transition: background 0.2s ease;
-
-            &:hover {
-                background: rgba(255, 255, 255, 0.6);
-            }
-        }
-    }
-}
diff --git a/frontend/app/view/codeeditor/codeeditor.tsx b/frontend/app/view/codeeditor/codeeditor.tsx
index 53254fcdac..d351aa9bcf 100644
--- a/frontend/app/view/codeeditor/codeeditor.tsx
+++ b/frontend/app/view/codeeditor/codeeditor.tsx
@@ -19,7 +19,6 @@ import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
 import { SchemaEndpoints, getSchemaEndpointInfo } from "./schemaendpoints";
 import ymlWorker from "./yamlworker?worker";
 
-import "./codeeditor.scss";
 
 // there is a global monaco variable (TODO get the correct TS type)
 declare var monaco: Monaco;
@@ -178,8 +177,8 @@ export function CodeEditor({ blockId, text, language, filename, fileinfo, meta,
     }, [minimapEnabled, stickyScrollEnabled, wordWrap, fontSize, fileinfo.readonly]);
 
     return (
-        <div className="code-editor-wrapper">
-            <div className="code-editor" ref={divRef}>
+        <div className="flex flex-col w-full h-full overflow-hidden items-center justify-center">
+            <div className="flex flex-col h-full w-full" ref={divRef}>
                 <Editor
                     theme={theme}
                     value={text}
diff --git a/frontend/app/view/helpview/helpview.scss b/frontend/app/view/helpview/helpview.scss
deleted file mode 100644
index 9e5c7263c8..0000000000
--- a/frontend/app/view/helpview/helpview.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-.help-view {
-    width: 100%;
-    height: 100%;
-    .docsite-webview {
-        width: 100%;
-        height: 100%;
-        border: 0;
-    }
-}
diff --git a/frontend/app/view/helpview/helpview.tsx b/frontend/app/view/helpview/helpview.tsx
index ab3e57115f..34d633982f 100644
--- a/frontend/app/view/helpview/helpview.tsx
+++ b/frontend/app/view/helpview/helpview.tsx
@@ -9,7 +9,6 @@ import { WebView, WebViewModel } from "@/app/view/webview/webview";
 import { fireAndForget } from "@/util/util";
 import { atom, useAtomValue } from "jotai";
 import { useCallback } from "react";
-import "./helpview.scss";
 
 const docsiteWebUrl = "https://docs.waveterm.dev/";
 const baseUrlRegex = /http[s]?:\/\/([^:\/])+(:\d+)?/;
@@ -166,7 +165,7 @@ function HelpView(props: ViewComponentProps<HelpViewModel>) {
         [homepageUrl]
     );
     return (
-        <div className="help-view">
+        <div className="w-full h-full">
             <WebView {...props} onFailLoad={onFailLoad} />
         </div>
     );
diff --git a/frontend/app/view/sysinfo/sysinfo.scss b/frontend/app/view/sysinfo/sysinfo.scss
deleted file mode 100644
index cfa5c1f109..0000000000
--- a/frontend/app/view/sysinfo/sysinfo.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-.sysinfo-view {
-    flex-flow: column nowrap;
-    flex-grow: 1;
-    margin-bottom: 0;
-    overflow-y: auto;
-    .sysinfo-inner {
-        width: 100%;
-        height: 100%;
-        display: grid;
-        grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
-        gap: 10px;
-
-        &.two-columns {
-            grid-template-columns: 1fr 1fr;
-        }
-
-        .sysinfo-plot-content {
-            min-height: 100px;
-            svg {
-                [aria-label="tip"] {
-                    g {
-                        path {
-                            color: var(--border-color);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/frontend/app/view/sysinfo/sysinfo.tsx b/frontend/app/view/sysinfo/sysinfo.tsx
index dc26528498..4cfd8bb792 100644
--- a/frontend/app/view/sysinfo/sysinfo.tsx
+++ b/frontend/app/view/sysinfo/sysinfo.tsx
@@ -16,7 +16,6 @@ import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { atoms } from "@/store/global";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
-import "./sysinfo.scss";
 
 const DefaultNumPoints = 120;
 
@@ -513,7 +512,7 @@ function SingleLinePlot({
         };
     }, [plot, plotWidth, plotHeight]);
 
-    return <div ref={containerRef} className="sysinfo-plot-content" />;
+    return <div ref={containerRef} className="min-h-[100px]" />;
 }
 
 const SysinfoViewInner = React.memo(({ model }: SysinfoViewProps) => {
@@ -534,10 +533,10 @@ const SysinfoViewInner = React.memo(({ model }: SysinfoViewProps) => {
     return (
         <OverlayScrollbarsComponent
             ref={osRef}
-            className="sysinfo-view"
+            className="flex flex-col flex-grow mb-0 overflow-y-auto"
             options={{ scrollbars: { autoHide: "leave" } }}
         >
-            <div className={clsx("sysinfo-inner", { "two-columns": cols2 })}>
+            <div className={clsx("w-full h-full grid grid-rows-[repeat(auto-fit,minmax(100px,1fr))] gap-[10px]", { "grid-cols-2": cols2 })}>
                 {yvals.map((yval, idx) => {
                     return (
                         <SingleLinePlot
diff --git a/frontend/tailwindsetup.css b/frontend/tailwindsetup.css
index acf1c74b0e..810252ba61 100644
--- a/frontend/tailwindsetup.css
+++ b/frontend/tailwindsetup.css
@@ -60,3 +60,19 @@
     --ansi-brightcyan: #b7b8cb;
     --ansi-brightwhite: #f0f0f0;
 }
+
+/* Chart tooltip styling for sysinfo plots */
+svg [aria-label="tip"] g path {
+    color: var(--border-color);
+}
+
+/* Monaco editor scrollbar styling */
+.monaco-editor .slider {
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+}
+
+.monaco-editor .slider:hover {
+    background: rgba(255, 255, 255, 0.6);
+}