From e56704b69f1ceaed4ffd4265429763b4f18118ee Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Thu, 21 May 2026 12:30:39 -0400
Subject: [PATCH] =?UTF-8?q?web-ui:=20wave-1=20foundation=20=E2=80=94=20ser?=
 =?UTF-8?q?vices/web-ui/src/css/components/slide-panel.css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-ui/src/css/components/slide-panel.css | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 services/web-ui/src/css/components/slide-panel.css

diff --git a/services/web-ui/src/css/components/slide-panel.css b/services/web-ui/src/css/components/slide-panel.css
new file mode 100644
index 0000000..eb992ce
--- /dev/null
+++ b/services/web-ui/src/css/components/slide-panel.css
@@ -0,0 +1,69 @@
+/* slide-panel.css ─ right-sliding 460px panel with locked flex layout.
+ * The min-height:0 on body is the flex-overflow footgun fix from
+ * the codec-clipping bug. Don't remove it. */
+
+.wd-slide-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  background: oklch(8% 0.010 266 / 0.65);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 240ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.wd-slide-overlay.is-open {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.wd-slide-panel {
+  position: fixed;
+  top: 0; right: 0; bottom: 0;
+  width: 460px;
+  height: 100vh;
+  max-height: 100vh;
+  z-index: var(--z-panel);
+  background: var(--bg-panel);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transform: translateX(100%);
+  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.wd-slide-panel.is-open { transform: translateX(0); }
+
+.wd-slide-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 52px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--border-faint);
+  flex-shrink: 0;
+}
+.wd-slide-panel-title {
+  font: 600 14px/1 var(--font);
+  letter-spacing: -0.005em;
+  color: var(--text-primary);
+}
+
+.wd-slide-panel-body {
+  flex: 1;
+  min-height: 0;            /* critical for flex overflow */
+  overflow-y: auto;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.wd-slide-panel-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 18px;
+  background: var(--bg-deep);
+  border-top: 1px solid var(--border-faint);
+  flex-shrink: 0;
+}