tailwind v4 updates (removing some more scss)

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}

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>
     );

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>
     );

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

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);
+}