Skip to content

Commit 255af98

Browse files
ShreyPurohitShreyPurohit
committed
v0.1: fix: Webview Headers
1 parent 007bcdd commit 255af98

2 files changed

Lines changed: 13 additions & 77 deletions

File tree

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/ui/webview.ts‎

Lines changed: 11 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,10 @@ export class WebviewManager {
4444
}
4545
4646
:root {
47-
/* Dark Theme Colors */
4847
--bg-primary: #0d0d0f;
4948
--bg-secondary: #1a1a1f;
5049
--bg-tertiary: #212127;
5150
--bg-elevated: #2a2a32;
52-
5351
--lavender-50: #f8f6fc;
5452
--lavender-100: #ede7f5;
5553
--lavender-200: #ddd0eb;
@@ -60,29 +58,23 @@ export class WebviewManager {
6058
--lavender-700: #744691;
6159
--lavender-800: #5f3a7a;
6260
--lavender-900: #4d2f63;
63-
6461
--text-primary: #e8e8f0;
6562
--text-secondary: #c4c4d6;
6663
--text-tertiary: #a0a0b8;
6764
--text-muted: #7c7c94;
6865
--text-accent: #b08cc9;
69-
7066
--success: #4ade80;
7167
--error: #f87171;
7268
--warning: #fbbf24;
73-
7469
--border-light: #3a3a42;
7570
--border-medium: #4a4a54;
7671
--border-strong: #5a5a66;
7772
--border-accent: #6b5b95;
78-
7973
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
8074
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
8175
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
8276
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
8377
--shadow-lavender: 0 4px 20px rgba(153, 102, 179, 0.15);
84-
85-
/* Code Colors */
8678
--code-bg: #1e1e24;
8779
--code-border: #3a3a42;
8880
--code-text: #d4d4d8;
@@ -93,17 +85,13 @@ export class WebviewManager {
9385
--code-function: #60a5fa;
9486
--code-operator: #f472b6;
9587
--code-bracket: #a78bfa;
96-
97-
/* Interactive Element Base Styles */
9888
--interactive-bg: rgba(153, 102, 179, 0.15);
9989
--interactive-border: var(--lavender-600);
10090
--interactive-hover-bg: rgba(153, 102, 179, 0.25);
10191
--interactive-hover-border: var(--lavender-500);
10292
}
10393
104-
/* Light Theme - Solarized Light + Lavender */
10594
:root[data-theme='light'] {
106-
/* Solarized Base Colors */
10795
--solarized-base03: #002b36;
10896
--solarized-base02: #073642;
10997
--solarized-base01: #586e75;
@@ -112,8 +100,6 @@ export class WebviewManager {
112100
--solarized-base1: #93a1a1;
113101
--solarized-base2: #eee8d5;
114102
--solarized-base3: #fdf6e3;
115-
116-
/* Solarized Accents */
117103
--solarized-yellow: #b58900;
118104
--solarized-orange: #cb4b16;
119105
--solarized-red: #dc322f;
@@ -122,14 +108,10 @@ export class WebviewManager {
122108
--solarized-blue: #268bd2;
123109
--solarized-cyan: #2aa198;
124110
--solarized-green: #859900;
125-
126-
/* Backgrounds */
127111
--bg-primary: var(--solarized-base3);
128112
--bg-secondary: var(--solarized-base2);
129113
--bg-tertiary: #f5efe6;
130114
--bg-elevated: #ffffff;
131-
132-
/* Lavender Accents */
133115
--lavender-50: #faf8ff;
134116
--lavender-100: #f3f0ff;
135117
--lavender-200: #e9e5ff;
@@ -140,33 +122,23 @@ export class WebviewManager {
140122
--lavender-700: #7c3aed;
141123
--lavender-800: #6d28d9;
142124
--lavender-900: #5b21b6;
143-
144-
/* Text Colors */
145125
--text-primary: var(--solarized-base02);
146126
--text-secondary: var(--solarized-base01);
147127
--text-tertiary: var(--solarized-base00);
148128
--text-muted: var(--solarized-base1);
149129
--text-accent: var(--lavender-700);
150-
151-
/* Status Colors - Fixed for light mode */
152130
--success: #16a34a;
153131
--error: #dc2626;
154132
--warning: var(--solarized-yellow);
155-
156-
/* Borders */
157133
--border-light: #ede4d3;
158134
--border-medium: #ddd2c1;
159135
--border-strong: var(--solarized-base1);
160136
--border-accent: var(--lavender-400);
161-
162-
/* Shadows */
163137
--shadow-sm: 0 1px 2px 0 rgba(0, 43, 54, 0.05);
164138
--shadow-md: 0 4px 6px -1px rgba(0, 43, 54, 0.08), 0 2px 4px -2px rgba(0, 43, 54, 0.06);
165139
--shadow-lg: 0 10px 15px -3px rgba(0, 43, 54, 0.08), 0 4px 6px -4px rgba(0, 43, 54, 0.06);
166140
--shadow-xl: 0 20px 25px -5px rgba(0, 43, 54, 0.1), 0 8px 10px -6px rgba(0, 43, 54, 0.08);
167141
--shadow-lavender: 0 4px 20px rgba(139, 92, 246, 0.1);
168-
169-
/* Code Colors */
170142
--code-bg: var(--solarized-base3);
171143
--code-border: var(--solarized-base2);
172144
--code-text: var(--solarized-base02);
@@ -177,8 +149,6 @@ export class WebviewManager {
177149
--code-function: var(--solarized-blue);
178150
--code-operator: var(--solarized-magenta);
179151
--code-bracket: var(--lavender-600);
180-
181-
/* Interactive Elements */
182152
--interactive-bg: rgba(139, 92, 246, 0.1);
183153
--interactive-border: var(--lavender-300);
184154
--interactive-hover-bg: rgba(139, 92, 246, 0.2);
@@ -209,28 +179,30 @@ export class WebviewManager {
209179
backdrop-filter: blur(10px);
210180
}
211181
212-
/* HEADER FIXES START HERE */
213182
header {
214183
background: linear-gradient(135deg, var(--lavender-800) 0%, var(--lavender-900) 50%, #2a1f3d 100%);
215184
color: white;
216185
padding: 24px 28px;
217186
border-bottom: 3px solid var(--border-accent);
218187
position: relative;
219-
220-
/* Fixed responsive layout */
221188
display: flex;
222189
flex-wrap: wrap;
223190
align-items: center;
224191
justify-content: space-between;
225192
gap: 16px;
226193
}
227194
228-
/* Light theme header - Fixed */
229195
:root[data-theme='light'] header {
230196
background: linear-gradient(135deg, var(--lavender-600) 0%, var(--lavender-700) 50%, var(--lavender-800) 100%);
231197
color: white;
232198
}
233199
200+
header {
201+
display: flex;
202+
gap: 16px;
203+
align-items: stretch;
204+
}
205+
234206
header::before {
235207
content: '';
236208
position: absolute;
@@ -245,9 +217,7 @@ export class WebviewManager {
245217
display: flex;
246218
align-items: center;
247219
gap: 12px;
248-
flex: 1;
249-
min-width: 0; /* Allow text to shrink */
250-
}
220+
}
251221
252222
.title {
253223
font-size: 1.5rem;
@@ -261,10 +231,10 @@ export class WebviewManager {
261231
white-space: nowrap;
262232
}
263233
264-
/* Fixed theme toggle button */
265234
.icon-btn.theme-toggle {
266235
width: 28px;
267236
height: 28px;
237+
margin-top: 3px;
268238
border-radius: 6px;
269239
display: inline-flex;
270240
align-items: center;
@@ -285,15 +255,6 @@ export class WebviewManager {
285255
transform: translateY(-1px);
286256
}
287257
288-
/* Fixed header controls container */
289-
.header-controls {
290-
display: flex;
291-
align-items: center;
292-
gap: 12px;
293-
flex-shrink: 0;
294-
}
295-
296-
/* Fixed status badge */
297258
.status-badge {
298259
display: inline-flex;
299260
align-items: center;
@@ -307,14 +268,11 @@ export class WebviewManager {
307268
border: 2px solid transparent;
308269
backdrop-filter: blur(10px);
309270
white-space: nowrap;
310-
311-
/* Default state */
312271
background: rgba(255, 255, 255, 0.1);
313272
color: white;
314273
border-color: rgba(255, 255, 255, 0.2);
315274
}
316275
317-
/* Status badge states - Fixed colors */
318276
.status-badge.valid {
319277
background: rgba(74, 222, 128, 0.2);
320278
color: #4ade80;
@@ -333,7 +291,6 @@ export class WebviewManager {
333291
border-color: #fbbf24;
334292
}
335293
336-
/* Light theme status badges - Fixed */
337294
:root[data-theme='light'] .status-badge.valid {
338295
background: rgba(22, 163, 74, 0.15);
339296
color: #16a34a;
@@ -360,7 +317,6 @@ export class WebviewManager {
360317
flex-shrink: 0;
361318
}
362319
363-
/* Fixed interactive button */
364320
.interactive-btn {
365321
background: rgba(255, 255, 255, 0.1);
366322
color: white;
@@ -410,7 +366,6 @@ export class WebviewManager {
410366
display: block;
411367
}
412368
413-
/* MOBILE RESPONSIVE FIXES */
414369
@media (max-width: 768px) {
415370
body {
416371
padding: 16px;
@@ -430,20 +385,12 @@ export class WebviewManager {
430385
431386
.header-title {
432387
justify-content: center;
433-
order: 1;
434388
}
435389
436390
.title {
437391
font-size: 1.25rem;
438392
text-align: center;
439393
}
440-
441-
.header-controls {
442-
order: 2;
443-
justify-content: center;
444-
flex-wrap: wrap;
445-
gap: 10px;
446-
}
447394
448395
.status-badge,
449396
.interactive-btn {
@@ -454,7 +401,6 @@ export class WebviewManager {
454401
}
455402
456403
.icon-btn.theme-toggle {
457-
order: 0;
458404
align-self: center;
459405
margin-bottom: 8px;
460406
}
@@ -469,18 +415,12 @@ export class WebviewManager {
469415
font-size: 1.125rem;
470416
}
471417
472-
.header-controls {
473-
flex-direction: column;
474-
width: 100%;
475-
}
476-
477418
.status-badge,
478419
.interactive-btn {
479420
width: 100%;
480421
max-width: none;
481422
}
482423
}
483-
/* HEADER FIXES END HERE */
484424
485425
.content {
486426
padding: 32px;
@@ -580,6 +520,8 @@ export class WebviewManager {
580520
581521
.button-group {
582522
display: flex;
523+
flex-direction: row;
524+
flex-wrap: wrap;
583525
gap: 12px;
584526
align-items: center;
585527
}
@@ -678,18 +620,12 @@ export class WebviewManager {
678620
}
679621
}
680622
681-
@media (max-width: 600px) {
682-
.button-group {
683-
flex-direction: column;
684-
width: 100%;
685-
}
686-
623+
@media (max-width: 600px) {
687624
.btn {
688625
width: 100%;
689626
}
690627
}
691628
692-
/* Thin custom scrollbars */
693629
* {
694630
scrollbar-width: thin;
695631
scrollbar-color: var(--border-accent) transparent;

0 commit comments

Comments
 (0)