feat(visualizations): add side-by-side layout for animation and code panels

- Increase container max-width to 1400px for wider layout
- Add flexbox-based .main-content wrapper for side-by-side display
- Visualization panel takes ~60% width, code panel takes ~40%
- Code panel is sticky with scrollable content
- Falls back to stacked layout on screens below 1024px

Signed-off-by: Ayush Joshi <ayush854032@gmail.com>

Author: joshiayush

visualizations/arrays/best-time-to-buy-and-sell-stock/index.html

@@ -28,6 +28,7 @@ <h1>Best Time to Buy and Sell Stock</h1>
             </div>
         </div>
 
+        <div class="main-content">
         <div class="visualization">
             <div class="section-title">Stock Prices</div>
             <div class="chart-container">
@@ -104,6 +105,7 @@ <h3>Max Profit</h3>
                 <span class="code-keyword">return</span> profit
             </div>
         </div>
+        </div>
     </div>
 
     <script src="../../shared/js/visualizer.js"></script>

visualizations/arrays/maximum-subarray/index.html

@@ -28,6 +28,7 @@ <h1>Maximum Subarray</h1>
             </div>
         </div>
 
+        <div class="main-content">
         <div class="visualization">
             <div class="section-title">Array</div>
             <div class="array-container" id="arrayDisplay"></div>
@@ -109,6 +110,7 @@ <h3>Max Subarray</h3>
                 <span class="code-keyword">return</span> max
             </div>
         </div>
+        </div>
     </div>
 
     <script src="../../shared/js/visualizer.js"></script>

visualizations/arrays/sort-colors/index.html

@@ -28,6 +28,7 @@ <h1>Sort Colors - Dutch National Flag</h1>
             </div>
         </div>
 
+        <div class="main-content">
         <div class="visualization">
             <div class="section-title">Array</div>
 
@@ -136,6 +137,7 @@ <h3>High Pointer</h3>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;high -= <span class="code-number">1</span>
             </div>
         </div>
+        </div>
     </div>
 
     <script src="../../shared/js/visualizer.js"></script>

visualizations/arrays/two-sum/index.html

@@ -31,6 +31,7 @@ <h1>Two Sum Algorithm</h1>
             </div>
         </div>
 
+        <div class="main-content">
         <div class="visualization">
             <div class="section-title">Array</div>
             <div class="array-container" id="arrayDisplay"></div>
@@ -105,6 +106,7 @@ <h3>Target</h3>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;numsMap[nums[i]] = i
             </div>
         </div>
+        </div>
     </div>
 
     <script src="../../shared/js/visualizer.js"></script>

visualizations/matrix/number-of-islands/index.html

@@ -28,6 +28,7 @@ <h1>Number of Islands</h1>
             </div>
         </div>
 
+        <div class="main-content">
         <div class="visualization">
             <div class="section-title">Grid</div>
             <div class="grid-container" id="gridContainer"></div>
@@ -115,6 +116,7 @@ <h3>DFS Stack</h3>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dfs(i+di, j+dj)
             </div>
         </div>
+        </div>
     </div>
 
     <script src="../../shared/js/visualizer.js"></script>

visualizations/shared/css/main.css

@@ -19,10 +19,17 @@ body {
 
 /* Layout */
 .container {
-    max-width: 1000px;
+    max-width: 1400px;
     margin: 0 auto;
 }
 
+/* Main Content - Side by Side Layout */
+.main-content {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+}
+
 h1 {
     text-align: center;
     margin-bottom: 10px;
@@ -168,6 +175,8 @@ button:disabled {
     border-radius: 15px;
     padding: 30px;
     margin-bottom: 20px;
+    flex: 3;
+    min-width: 0;
 }
 
 .section-title {
@@ -313,7 +322,12 @@ button:disabled {
     background: #1e1e3f;
     border-radius: 15px;
     padding: 20px;
-    margin-top: 20px;
+    flex: 2;
+    position: sticky;
+    top: 20px;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    min-width: 0;
 }
 
 .code-line {
@@ -693,6 +707,23 @@ button:disabled {
 }
 
 /* Responsive */
+@media (max-width: 1024px) {
+    .main-content {
+        flex-direction: column;
+    }
+
+    .visualization {
+        flex: none;
+    }
+
+    .code-panel {
+        flex: none;
+        position: static;
+        max-height: none;
+        overflow-y: visible;
+    }
+}
+
 @media (max-width: 768px) {
     .container {
         padding: 10px;

visualizations/strings/kmp/index.html

@@ -31,6 +31,7 @@ <h1>KMP Pattern Matching</h1>
             </div>
         </div>
 
+        <div class="main-content">
         <div class="visualization">
             <div class="section-title">Text (Haystack)</div>
             <div class="string-container" id="haystackDisplay"></div>
@@ -120,6 +121,7 @@ <h3>Status</h3>
                 <span class="code-keyword">return</span> -<span class="code-number">1</span>
             </div>
         </div>
+        </div>
     </div>
 
     <script src="../../shared/js/visualizer.js"></script>

visualizations/strings/longest-palindromic-substring/index.html

@@ -28,6 +28,7 @@ <h1>Longest Palindromic Substring</h1>
             </div>
         </div>
 
+        <div class="main-content">
         <div class="visualization">
             <div class="section-title">String</div>
             <div class="string-container" id="stringDisplay"></div>
@@ -108,6 +109,7 @@ <h3>Length</h3>
                 <span class="code-keyword">return</span> longest
             </div>
         </div>
+        </div>
     </div>
 
     <script src="../../shared/js/visualizer.js"></script>