From d570e859f6f3bef96b55f0ba29487db894bbb25c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 21 Mar 2026 03:03:53 +0000
Subject: [PATCH] Redesign Transforms tab with side-by-side split layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Widen container from 900px to 1200px to use available screen width
- Split Transforms tab into two-column grid layout:
  - Left column (340px, sticky): input textarea + output display
  - Right column (flex): scrollable transform categories/buttons
- Output now appears directly below input on the left, always visible
  while browsing transforms — no more scrolling past categories to
  see results
- Responsive: collapses back to single column below 900px
- Shortened output section labels to be more concise

https://claude.ai/code/session_01DjqbQB8WcZoGVe78sjvh72
---
 css/style.css             | 73 +++++++++++++++++++++++++++++++++++----
 templates/transforms.html | 66 +++++++++++++++++++----------------
 2 files changed, 102 insertions(+), 37 deletions(-)

diff --git a/css/style.css b/css/style.css
index 0d9e52f..9b588f2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -509,7 +509,7 @@ label small {
 }
 
 .container {
-    max-width: 900px;
+    max-width: 1200px;
     width: 100%;
     margin: 0 auto;
     padding: 24px;
@@ -2856,7 +2856,57 @@ html {
     position: relative;
 }
 
-/* Keep the transform input visible while scrolling */
+/* === Two-column split layout for Transforms tab === */
+.transform-split-layout {
+    display: grid;
+    grid-template-columns: 340px 1fr;
+    gap: 20px;
+    align-items: start;
+}
+
+.transform-left-col {
+    position: sticky;
+    top: 12px;
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+}
+
+.transform-left-col .input-section {
+    background: var(--secondary-bg);
+    border: 1px solid var(--input-border);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    border-radius: 6px;
+    padding: 12px;
+}
+
+.transform-left-col .input-section textarea {
+    min-height: 100px;
+    resize: vertical;
+}
+
+.transform-left-col .output-section {
+    margin-top: 0;
+    padding: 12px;
+    border-radius: 6px;
+    background: var(--main-bg-color);
+    border: 1px solid rgba(100, 181, 246, 0.3);
+}
+
+.transform-left-col .output-section textarea {
+    min-height: 80px;
+    max-height: 40vh;
+    resize: vertical;
+}
+
+.transform-right-col {
+    min-width: 0;
+}
+
+/* Keep the transform input visible while scrolling (single-column fallback) */
 .transform-layout .input-section {
     position: sticky;
     top: 8px;
@@ -3411,12 +3461,21 @@ html {
 
 /* Medium screens (900px) */
 @media (max-width: 900px) {
-    .steg-split-layout { 
-        grid-template-columns: 1fr; 
+    .steg-split-layout {
+        grid-template-columns: 1fr;
     }
-    .steg-advanced-sidebar { 
-        position: relative; 
-        top: 0; 
+    .steg-advanced-sidebar {
+        position: relative;
+        top: 0;
+    }
+    .transform-split-layout {
+        grid-template-columns: 1fr;
+    }
+    .transform-left-col {
+        position: relative;
+        top: 0;
+        max-height: none;
+        overflow-y: visible;
     }
 }
 
diff --git a/templates/transforms.html b/templates/transforms.html
index ccda717..a5f3811 100644
--- a/templates/transforms.html
+++ b/templates/transforms.html
@@ -1,14 +1,42 @@
 <div v-if="activeTab === 'transforms'" class="tab-content">
-                <div class="transform-layout">
-                    <div class="input-section">
-                        <textarea 
-                            id="transform-input" 
-                            v-model="transformInput" 
-                            placeholder="Enter text to transform..."
-                            @input="autoTransform"
-                        ></textarea>
+                <div class="transform-layout transform-split-layout">
+                    <!-- LEFT COLUMN: Input + Output (sticky) -->
+                    <div class="transform-left-col">
+                        <div class="input-section">
+                            <textarea
+                                id="transform-input"
+                                v-model="transformInput"
+                                placeholder="Enter text to transform..."
+                                @input="autoTransform"
+                            ></textarea>
+                        </div>
+
+                        <div class="output-section" v-if="transformOutput">
+                            <div class="output-heading">
+                                <h4>
+                                    <i class="fas fa-check-circle"></i>
+                                    Transformed
+                                    <small v-if="activeTransform">({{ activeTransform.name }})</small>
+                                </h4>
+                            </div>
+                            <div class="output-container">
+                                <textarea
+                                    readonly
+                                    v-model="transformOutput"
+                                    aria-label="Transformed text output"
+                                ></textarea>
+                                <button class="copy-button" @click="copyToClipboard(transformOutput)" title="Copy to clipboard">
+                                    <i class="fas fa-copy"></i>
+                                </button>
+                            </div>
+                            <div class="output-instructions">
+                                <small><i class="fas fa-info-circle"></i> Auto-copied. Use Decoder tab to reverse.</small>
+                            </div>
+                        </div>
                     </div>
 
+                    <!-- RIGHT COLUMN: Transform categories (scrollable) -->
+                    <div class="transform-right-col">
                     <div class="transform-section">
                         <div class="transform-category-legend">
                             <div class="legend-title">Categories:</div>
@@ -275,28 +303,6 @@
                             </template>
                         </div>
                     </div>
-
-                    <div class="output-section" v-if="transformOutput">
-                        <div class="output-heading">
-                            <h4>
-                                <i class="fas fa-check-circle"></i> 
-                                Transformed Message
-                                <small v-if="activeTransform">({{ activeTransform.name }})</small>
-                            </h4>
-                        </div>
-                        <div class="output-container">
-                            <textarea 
-                                readonly 
-                                v-model="transformOutput"
-                                aria-label="Transformed text output"
-                            ></textarea>
-                            <button class="copy-button" @click="copyToClipboard(transformOutput)" title="Copy to clipboard">
-                                <i class="fas fa-copy"></i>
-                            </button>
-                        </div>
-                        <div class="output-instructions">
-                            <small><i class="fas fa-info-circle"></i> Copy this text and share it. Use the Decoder tab to reverse transformations.</small>
-                        </div>
                     </div>
                 </div>
             </div>
\ No newline at end of file