fix(themes): fix tab positioning, task viewer scrollbar, and Latte progress text contrast

- Remove position:relative !important from .x-tab rule across all themes
  ExtJS box layout uses inline position:absolute for tab offsets; overriding
  with relative caused each tab offset to double-count (natural flow pos +
  intended left), pushing Memory/Network/Confirm tabs off-screen. Fixes #50
- Scope .x-window .x-panel-body overflow:visible to :not(.x-scroller)
  Blanket override was clobbering ExtJS inline overflow:auto on scrollable
  panel bodies, removing task viewer scrollbars. Fixes #49
- Set --ctp-on-accent to #ffffff in Catppuccin Latte
  var(--ctp-base) = #eff1f5 (near-white) was invisible on Latte's light bg;
  white gives proper contrast against vivid accent fills. Fixes #51

Bumps version to v2.7.3

Author: IT-BAER

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.7.3] - 2026-06-12
+
+### Fixed
+- **All themes** — Task Viewer window no longer loses its scrollbar. The blanket `.x-window .x-panel-body { overflow: visible !important }` rule was overriding ExtJS's own inline `overflow: auto` on scrollable panel bodies (`.x-scroller`). Fixed by scoping the rule to `:not(.x-scroller)`. Issue [#49](https://github.com/IT-BAER/proxmorph/issues/49)
+- **All themes** — CT and VM creation dialog tabs are no longer pushed off-screen. `position: relative !important` on `.x-tab` was overriding ExtJS box layout's absolute positioning, causing each tab's offset to double-count (natural flow position + intended left = tabs spreading ~1.5× wider than the container). Removed the offending declaration. Issue [#50](https://github.com/IT-BAER/proxmorph/issues/50)
+- **Catppuccin Latte** — Text on colored elements (progress bar fill, active buttons, badges) is now visible. `--ctp-on-accent` was set to `var(--ctp-base)` (`#eff1f5`, near-white), which is invisible on the light Latte background. Changed to `#ffffff` for proper contrast against vivid Latte accent fills (mauve, red, yellow). Issue [#51](https://github.com/IT-BAER/proxmorph/issues/51)
+
 ## [2.7.2] - 2026-04-16
 
 ### Fixed

install.sh

@@ -15,7 +15,7 @@ MAGENTA='\033[0;35m'
 NC='\033[0m' # No Color
 
 # Configuration
-VERSION="2.7.2"
+VERSION="2.7.3"
 WIDGET_TOOLKIT_DIR="/usr/share/javascript/proxmox-widget-toolkit"
 THEMES_DIR="${WIDGET_TOOLKIT_DIR}/themes"
 PROXMOXLIB_JS="${WIDGET_TOOLKIT_DIR}/proxmoxlib.js"

themes/theme-blue-slate.css

@@ -168,7 +168,7 @@ canvas.x-surface-canvas, .x-surface-canvas, .x-draw-component canvas,
     padding: 12px 0 !important;
 }
 
-.x-window .x-panel-body {
+.x-window .x-panel-body:not(.x-scroller) {
     overflow: visible !important;
 }
 
@@ -1241,7 +1241,6 @@ div[id^="pveResourceTree"] .x-grid-cell {
     border: none !important;
     border-radius: var(--pm-radius-md) var(--pm-radius-md) 0 0 !important;
     padding: 8px 16px 8px !important;
-    position: relative !important;
     overflow: visible !important;
     margin-bottom: 0 !important;
     transition: color 0.15s ease !important;

themes/theme-catppuccin-frappe.css

@@ -297,7 +297,7 @@ svg.x-surface,
 }
 
 /* Allow column panel bodies to show overflowed form content */
-.x-window .x-panel-body {
+.x-window .x-panel-body:not(.x-scroller) {
     overflow: visible !important;
 }
 
@@ -1553,7 +1553,6 @@ div[id^="pveResourceTree"] .x-grid-cell {
     border: none !important;
     border-radius: var(--pm-radius-md) var(--pm-radius-md) 0 0 !important;
     padding: 8px 16px 8px !important;
-    position: relative !important;
     overflow: visible !important;
     margin-bottom: 0 !important;
     transition: color 0.15s ease !important;

themes/theme-catppuccin-latte.css

@@ -92,8 +92,8 @@
     --pwt-chart-primary: var(--ctp-mauve);
     --pwt-chart-grid-stroke: var(--ctp-surface1);
 
-    /* On Accent text — style guide mandates Base for text on colored backgrounds */
-    --ctp-on-accent: var(--ctp-base);
+    /* On Accent text — white for Latte vivid accents (mauve/red contrast); Base is near-white, invisible on light bg */
+    --ctp-on-accent: #ffffff;
 
     /* Hover overlay — Overlay2@12% (neutral, per Catppuccin port conventions) */
     --ctp-hover-overlay: rgba(124, 127, 147, 0.12);
@@ -301,7 +301,7 @@ svg.x-surface,
 }
 
 /* Allow column panel bodies to show overflowed form content */
-.x-window .x-panel-body {
+.x-window .x-panel-body:not(.x-scroller) {
     overflow: visible !important;
 }
 
@@ -1557,7 +1557,6 @@ div[id^="pveResourceTree"] .x-grid-cell {
     border: none !important;
     border-radius: var(--pm-radius-md) var(--pm-radius-md) 0 0 !important;
     padding: 8px 16px 8px !important;
-    position: relative !important;
     overflow: visible !important;
     margin-bottom: 0 !important;
     transition: color 0.15s ease !important;

themes/theme-catppuccin-macchiato.css

@@ -297,7 +297,7 @@ svg.x-surface,
 }
 
 /* Allow column panel bodies to show overflowed form content */
-.x-window .x-panel-body {
+.x-window .x-panel-body:not(.x-scroller) {
     overflow: visible !important;
 }
 
@@ -1553,7 +1553,6 @@ div[id^="pveResourceTree"] .x-grid-cell {
     border: none !important;
     border-radius: var(--pm-radius-md) var(--pm-radius-md) 0 0 !important;
     padding: 8px 16px 8px !important;
-    position: relative !important;
     overflow: visible !important;
     margin-bottom: 0 !important;
     transition: color 0.15s ease !important;

themes/theme-catppuccin-mocha-teal.css

@@ -297,7 +297,7 @@ svg.x-surface,
 }
 
 /* Allow column panel bodies to show overflowed form content */
-.x-window .x-panel-body {
+.x-window .x-panel-body:not(.x-scroller) {
     overflow: visible !important;
 }
 
@@ -1553,7 +1553,6 @@ div[id^="pveResourceTree"] .x-grid-cell {
     border: none !important;
     border-radius: var(--pm-radius-md) var(--pm-radius-md) 0 0 !important;
     padding: 8px 16px 8px !important;
-    position: relative !important;
     overflow: visible !important;
     margin-bottom: 0 !important;
     transition: color 0.15s ease !important;

themes/theme-catppuccin-mocha.css

@@ -325,7 +325,7 @@ svg.x-surface,
 }
 
 /* Allow column panel bodies to show overflowed form content */
-.x-window .x-panel-body {
+.x-window .x-panel-body:not(.x-scroller) {
     overflow: visible !important;
 }
 
@@ -1581,7 +1581,6 @@ div[id^="pveResourceTree"] .x-grid-cell {
     border: none !important;
     border-radius: var(--pm-radius-md) var(--pm-radius-md) 0 0 !important;
     padding: 8px 16px 8px !important;
-    position: relative !important;
     overflow: visible !important;
     margin-bottom: 0 !important;
     transition: color 0.15s ease !important;

themes/theme-dracula-cyan.css

@@ -293,7 +293,7 @@ svg.x-surface,
 }
 
 /* Allow column panel bodies to show overflowed form content */
-.x-window .x-panel-body {
+.x-window .x-panel-body:not(.x-scroller) {
     overflow: visible !important;
 }
 
@@ -1549,7 +1549,6 @@ div[id^="pveResourceTree"] .x-grid-cell {
     border: none !important;
     border-radius: var(--pm-radius-md) var(--pm-radius-md) 0 0 !important;
     padding: 8px 16px 8px !important;
-    position: relative !important;
     overflow: visible !important;
     margin-bottom: 0 !important;
     transition: color 0.15s ease !important;

themes/theme-dracula-green.css

@@ -293,7 +293,7 @@ svg.x-surface,
 }
 
 /* Allow column panel bodies to show overflowed form content */
-.x-window .x-panel-body {
+.x-window .x-panel-body:not(.x-scroller) {
     overflow: visible !important;
 }
 
@@ -1549,7 +1549,6 @@ div[id^="pveResourceTree"] .x-grid-cell {
     border: none !important;
     border-radius: var(--pm-radius-md) var(--pm-radius-md) 0 0 !important;
     padding: 8px 16px 8px !important;
-    position: relative !important;
     overflow: visible !important;
     margin-bottom: 0 !important;
     transition: color 0.15s ease !important;