Refactor styles and layout for dependency graph webview

mununki · mununki · commit 279354df902d · 2025-04-09T18:28:06.000+09:00
- Updated CSS styles for top controls and search container to improve layout and user interaction.
- Introduced a new class for top controls, enhancing the organization of the webview elements.
- Adjusted alignment and spacing for better visual consistency and usability.
- Ensured button styles are consistently applied across the webview for improved user experience.
diff --git a/vscode-rescriptdep/src/extension.ts b/vscode-rescriptdep/src/extension.ts
@@ -666,38 +666,21 @@ function showDotGraphWebview(context: vscode.ExtensionContext, dotContent: strin
             user-select: none;
         }
         
-        .controls {
+        /* Top controls wrapper */
+        .top-controls-wrapper {
             display: flex;
-            justify-content: center;
+            justify-content: space-between;
+            align-items: center;
             margin-bottom: 10px;
-            gap: 10px;
-            position: relative;
-            z-index: 10;
-        }
-        
-        button {
-            background-color: var(--vscode-button-background);
-            color: var(--vscode-button-foreground);
-            border: none;
-            padding: 6px 12px;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        
-        button:hover {
-            background-color: var(--vscode-button-hoverBackground);
+            width: 100%;
+            padding: 0 20px;
+            box-sizing: border-box;
         }
         
-        .zoom-controls {
-            display: flex;
-            gap: 5px;
-        }
-
         /* Legend styles - changed to lines */
         .legend {
             display: flex;
-            justify-content: center;
-            margin-bottom: 10px;
+            justify-content: flex-start;
             gap: 20px;
             position: relative;
             z-index: 10;
@@ -717,13 +700,30 @@ function showDotGraphWebview(context: vscode.ExtensionContext, dotContent: strin
         /* Search filter styles */
         .search-container {
             display: flex;
-            justify-content: center;
+            justify-content: flex-end;
             align-items: center;
-            margin-bottom: 10px;
             position: relative;
             z-index: 10;
         }
         
+        button {
+            background-color: var(--vscode-button-background);
+            color: var(--vscode-button-foreground);
+            border: none;
+            padding: 6px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        
+        button:hover {
+            background-color: var(--vscode-button-hoverBackground);
+        }
+        
+        .zoom-controls {
+            display: flex;
+            gap: 5px;
+        }
+        
         .search-input {
             padding: 4px 8px;
             border-radius: 4px;
@@ -759,8 +759,7 @@ function showDotGraphWebview(context: vscode.ExtensionContext, dotContent: strin
         .search-message {
             position: absolute;
             top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
+            left: 0;
             font-size: 12px;
             color: var(--vscode-inputValidation-errorForeground);
             margin-top: 3px;
@@ -774,6 +773,7 @@ function showDotGraphWebview(context: vscode.ExtensionContext, dotContent: strin
         
         .search-message.visible {
             opacity: 1;
+            white-space: nowrap;
         }
         
         /* Define colors for arrows that match the legend */
@@ -895,21 +895,23 @@ function showDotGraphWebview(context: vscode.ExtensionContext, dotContent: strin
     </style>
 </head>
 <body class="${isDarkTheme ? 'vscode-dark' : 'vscode-light'}">
-    <div class="legend">
-        <div class="legend-item">
-            <div class="legend-line" style="background-color: var(--dependents-color, lightblue);"></div>
-            <span>Dependents (modules that use the center module)</span>
+    <div class="top-controls-wrapper">
+        <div class="legend">
+            <div class="legend-item">
+                <div class="legend-line" style="background-color: var(--dependents-color, lightblue);"></div>
+                <span>Dependents (modules that use the center module)</span>
+            </div>
+            <div class="legend-item">
+                <div class="legend-line" style="background-color: var(--dependencies-color, lightcoral);"></div>
+                <span>Dependencies (modules used by the center module)</span>
+            </div>
         </div>
-        <div class="legend-item">
-            <div class="legend-line" style="background-color: var(--dependencies-color, lightcoral);"></div>
-            <span>Dependencies (modules used by the center module)</span>
+        <div class="search-container">
+            <input type="text" class="search-input" id="module-search" placeholder="Search for module..." />
+            <button class="search-button" id="search-button">Search</button>
+            <div class="search-message" id="search-message">Module not found</div>
         </div>
     </div>
-    <div class="search-container">
-        <input type="text" class="search-input" id="module-search" placeholder="Search for module..." />
-        <button class="search-button" id="search-button">Search</button>
-        <div class="search-message" id="search-message">Module not found</div>
-    </div>
     <div id="graph-container">
         <div id="graph"></div>
         <div id="error-container">
