fixed score aggregation styling

Author: sherloc512

index.html

@@ -806,38 +806,38 @@ <h2 class="title is-3 has-text-centered">Evaluation Framework</h2>
 						</div>
 						<div class="content has-text-justified">
 							<p>Our evaluation framework employs four core metrics:</p>
-							<div class="columns" style="margin-top: 10px">
+							<div class="columns" style="margin-top: 10px; align-items: stretch;">
 								<div class="column is-3">
-									<div class="box">
+									<div class="box" style="height: 100%; display: flex; flex-direction: column;">
 										<h5 class="title is-5">🔧 Render Score (T/V)</h5>
-										<p style="text-align: left">
+										<p style="text-align: left; flex: 1;">
 											Binary metric (0 or 1) indicating whether the generated code can be
 											successfully loaded or rendered without syntax errors
 										</p>
 									</div>
 								</div>
 								<div class="column is-3">
-									<div class="box">
+									<div class="box" style="height: 100%; display: flex; flex-direction: column;">
 										<h5 class="title is-5">✓ Syntax Score (T)</h5>
-										<p style="text-align: left">
+										<p style="text-align: left; flex: 1;">
 											Verifies structural correctness using format-specific
 											parsers or rendering engines
 										</p>
 									</div>
 								</div>
 								<div class="column is-3">
-									<div class="box">
+									<div class="box" style="height: 100%; display: flex; flex-direction: column;">
 										<h5 class="title is-5">🔍 Keyword Matching (V)</h5>
-										<p style="text-align: left">
+										<p style="text-align: left; flex: 1;">
 											Evaluates presence of required structural elements using
 											path-based rules
 										</p>
 									</div>
 								</div>
 								<div class="column is-3">
-									<div class="box">
+									<div class="box" style="height: 100%; display: flex; flex-direction: column;">
 										<h5 class="title is-5">👁️ VQA Score (V)</h5>
-										<p style="text-align: left">
+										<p style="text-align: left; flex: 1;">
 											Assesses visual correctness through GPT-4V-based question
 											answering (V tasks only)
 										</p>
@@ -847,29 +847,29 @@ <h5 class="title is-5">👁️ VQA Score (V)</h5>
 
 							<div style="margin-top: 40px">
 								<h3 class="title is-4 has-text-centered">Score Aggregation Methods</h3>
-								<div class="columns" style="margin-top: 20px">
+								<div class="columns" style="margin-top: 20px; align-items: stretch;">
 									<div class="column is-6">
-										<div class="box has-background-info-light">
+										<div class="box has-background-info-light" style="height: 100%; display: flex; flex-direction: column;">
 											<h5 class="title is-5 has-text-centered">🎨 Renderable Formats</h5>
 											<p class="has-text-centered" style="margin-bottom: 15px">
 												<em>HTML, React, SVG, LaTeX, Mermaid, etc.</em>
 											</p>
-											<div class="content">
-												<pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; font-size: 0.9em;">final_score = (0.2 × render_score) + 
-              (0.1 × keyword_matching) + 
-              (0.7 × vqa_score)</pre>
+											<div class="content" style="flex: 1;">
+												<pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; font-size: 0.9em;">Final Score = (0.2 × Render Score) + 
+             (0.1 × Keyword Matching) + 
+             (0.7 × VQA Score)</pre>
 											</div>
 										</div>
 									</div>
 									<div class="column is-6">
-										<div class="box has-background-light">
+										<div class="box has-background-light" style="height: 100%; display: flex; flex-direction: column;">
 											<h5 class="title is-5 has-text-centered">📝 Non-Renderable Formats</h5>
 											<p class="has-text-centered" style="margin-bottom: 15px">
 												<em>JSON, XML, YAML, CSV, TOML</em>
 											</p>
-											<div class="content">
-												<pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; font-size: 0.9em;">final_score = (0.2 × render_score) + 
-              (0.8 × syntax_score)</pre>
+											<div class="content" style="flex: 1;">
+												<pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; font-size: 0.9em;">Final Score = (0.2 × Render Score) + 
+             (0.8 × Syntax Score)</pre>
 											</div>
 										</div>
 									</div>