From 097f2c5609eb4cac6cc40f59858aa7953504ccdc Mon Sep 17 00:00:00 2001
From: a2nr <anggoro.dwi.nr@gmail.com>
Date: Mon, 11 May 2026 07:27:15 +0700
Subject: [PATCH] feat: enhance lesson UI with centered images, bordered
 tables, and conditional output tab

---
 examples/content/quiz_test.md                 |  5 ++++
 frontend/src/app.css                          | 24 +++++++++++++++++++
 .../src/lib/components/WorkspaceHeader.svelte |  4 +++-
 frontend/src/routes/lesson/[slug]/lesson.css  |  1 +
 4 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/examples/content/quiz_test.md b/examples/content/quiz_test.md
index e1b9767..51cbf59 100644
--- a/examples/content/quiz_test.md
+++ b/examples/content/quiz_test.md
@@ -4,6 +4,7 @@ Pelajaran ini berisi berbagai tipe kuis untuk menguji fitur Pilihan Ganda, Flash
 
 ---QUIZ_FLASHCARD---
 ### Bahasa C adalah bahasa pemrograman tingkat rendah.
+image: https://upload.wikimedia.org/wikipedia/commons/1/18/C_Programming_Language.svg
 - [] Benar
 - [x] Salah
 > Penjelasan: Bahasa C sebenarnya dikategorikan sebagai bahasa tingkat menengah (*middle-level language*) karena memiliki fitur bahasa tingkat rendah (seperti manipulasi memori) sekaligus fitur bahasa tingkat tinggi (seperti struktur kontrol yang manusiawi).
@@ -21,6 +22,10 @@ Cukup gunakan dua garis miring di awal baris, contoh: `// ini komentar`.
 
 ### Apa fungsi dari `return 0;` di dalam fungsi `main()`?
 Menandakan bahwa program telah selesai berjalan dengan sukses tanpa ada error.
+
+### Pilih gambar yang melambangkan bahasa C:
+- [x] ![C Logo](https://upload.wikimedia.org/wikipedia/commons/1/18/C_Programming_Language.svg)
+- [] ![Wrong Logo](https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg)
 ---END_QUIZ_FLASHCARD---
 
 ---EXERCISE---
diff --git a/frontend/src/app.css b/frontend/src/app.css
index e5aea8b..c063aaa 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -147,6 +147,30 @@ pre code {
 img {
 	max-width: 100%;
 	height: auto;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+/* ── Markdown Tables ─────────────────────────────────────────── */
+table {
+	width: 100%;
+	border-collapse: collapse;
+	margin-bottom: 1.25rem;
+	font-size: 0.85rem;
+	border: 1px solid var(--color-border);
+}
+th, td {
+	border: 1px solid var(--color-border);
+	padding: 8px 12px;
+	text-align: left;
+}
+th {
+	background: var(--color-bg-secondary);
+	font-weight: 600;
+}
+tr:nth-child(even) {
+	background: rgba(0, 0, 0, 0.02);
 }
 
 /* ── Cards ────────────────────────────────────────────────────── */
diff --git a/frontend/src/lib/components/WorkspaceHeader.svelte b/frontend/src/lib/components/WorkspaceHeader.svelte
index f205e45..483ef4d 100644
--- a/frontend/src/lib/components/WorkspaceHeader.svelte
+++ b/frontend/src/lib/components/WorkspaceHeader.svelte
@@ -101,7 +101,9 @@
 	{#if hasQuiz}
 		<button class="chrome-tab" class:active={activeTab === 'quiz'} onclick={() => handleTabClick('quiz')}>Quiz</button>
 	{/if}
-	<button class="chrome-tab" class:active={activeTab === 'output'} onclick={() => handleTabClick('output')}>Output</button>
+	{#if hasExercise}
+		<button class="chrome-tab" class:active={activeTab === 'output'} onclick={() => handleTabClick('output')}>Output</button>
+	{/if}
 {/snippet}
 
 {#if isMobile}
diff --git a/frontend/src/routes/lesson/[slug]/lesson.css b/frontend/src/routes/lesson/[slug]/lesson.css
index a415ea6..88107cb 100644
--- a/frontend/src/routes/lesson/[slug]/lesson.css
+++ b/frontend/src/routes/lesson/[slug]/lesson.css
@@ -53,6 +53,7 @@
 .tab-content p {
 	margin-bottom: 0.75rem;
 }
+
 .prose h2, .prose h3,
 .tab-content h2, .tab-content h3 {
 	margin-top: 1.25rem;