Maximize code area in presentation comparison slides

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ofriw

website/src/components/PresentationMode/RevealSlideshow.module.css

@@ -131,10 +131,9 @@
   font-size: 0.65em;
   line-height: 1.3;
   margin: 0.5em auto 0 auto;
-  max-width: var(--pres-component-max-width);
   border-radius: 6px;
   background: #1e1e1e;
-  padding: 1em;
+  padding: 0.75em;
   text-align: left;
   overflow-y: auto;
   overflow-x: auto;
@@ -158,14 +157,32 @@
 .comparison {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: clamp(1em, 2vw, 1.5em);
+  gap: clamp(0.75em, 1.5vw, 1.25em);
   margin: 1.5em auto 0.5em auto;
-  max-width: var(--pres-component-max-width);
+  max-width: 98%;
   flex: 1;
   min-height: 0;
   max-height: none;
 }
 
+/* Code comparison specific overrides - tighter spacing for maximum code readability */
+.comparisonCode {
+  gap: clamp(0.5em, 1vw, 0.85em);
+  margin: 1em auto 0.5em auto;
+  max-width: 99%;
+}
+
+.comparisonCode .comparisonLeft,
+.comparisonCode .comparisonRight {
+  padding: clamp(0.5em, 1vw, 0.75em);
+  border-width: 1px;
+}
+
+.comparisonCode .ineffective,
+.comparisonCode .effective {
+  margin-bottom: 0.2em;
+}
+
 .comparisonLeft,
 .comparisonRight {
   composes: gpuOptimized;

website/src/components/PresentationMode/RevealSlideshow.tsx

@@ -291,7 +291,7 @@ export default function RevealSlideshow({
             data-notes={formatSpeakerNotes(slide.speakerNotes)}
           >
             <h2>{slide.title}</h2>
-            <div className={styles.comparison}>
+            <div className={`${styles.comparison} ${styles.comparisonCode}`}>
               {slide.leftCode && (
                 <div className={styles.comparisonLeft}>
                   <h3 className={styles.ineffective}>{slide.leftCode.label}</h3>