feat: phase 5 of tailwind migration

assets/css/utilities.css

@@ -130,6 +130,119 @@
 		color: var(--vscode-descriptionForeground);
 	}
 
+	.ui-editor-shell {
+		height: 100%;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		background: var(--vscode-editor-background);
+	}
+
+	.ui-editor-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 12px;
+		min-height: 35px;
+		padding: 0 12px;
+		border-bottom: 1px solid var(--vscode-panel-border);
+		background: var(--vscode-tab-activeBackground);
+	}
+
+	.ui-editor-tab-current {
+		display: inline-flex;
+		max-width: 100%;
+		align-items: center;
+		gap: 6px;
+		overflow: hidden;
+		padding: 6px 12px;
+		border-radius: 4px 4px 0 0;
+		background: var(--vscode-tab-activeBackground);
+		color: var(--vscode-tab-activeForeground);
+	}
+
+	.ui-editor-actions {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 8px;
+		flex-wrap: wrap;
+	}
+
+	.ui-toolbar {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		min-height: 32px;
+	}
+
+	.ui-toolbar-group {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-width: 0;
+	}
+
+	.ui-field-stack {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		min-width: 0;
+	}
+
+	.ui-field-stack > label,
+	.ui-field-label {
+		font-size: 11px;
+		font-weight: 500;
+		color: var(--vscode-descriptionForeground);
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
+
+	.ui-field-grid-2,
+	.ui-field-grid-3 {
+		display: grid;
+		gap: 16px;
+	}
+
+	.ui-dropdown-menu {
+		background: var(--vscode-dropdown-background, var(--vscode-sideBar-background));
+		border: 1px solid var(--vscode-dropdown-border, var(--vscode-panel-border));
+		border-radius: 6px;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+		overflow: hidden;
+	}
+
+	.ui-dropdown-item {
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		width: 100%;
+		padding: 10px 12px;
+		border: none;
+		background: transparent;
+		color: var(--vscode-dropdown-foreground, var(--vscode-foreground));
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.1s;
+	}
+
+	.ui-dropdown-item:hover:not(:disabled) {
+		background: var(--vscode-list-hoverBackground, #2a2d2e);
+	}
+
+	.ui-dropdown-item:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.ui-section-card {
+		border: 1px solid var(--vscode-panel-border);
+		border-radius: 8px;
+		background: color-mix(in srgb, var(--vscode-editor-background) 84%, var(--vscode-input-background));
+	}
+
 	.btn-base {
 		display: inline-flex;
 		align-items: center;
@@ -176,3 +289,13 @@
 		overflow: hidden;
 	}
 }
+
+@media (min-width: 768px) {
+	.ui-field-grid-2 {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.ui-field-grid-3 {
+		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+	}
+}