src/NexusReader.UI.Shared/Pages/CreatorTest.razor.css

@@ -1,8 +1,41 @@
-/* Encapsulate Milkdown editor wrapper & ProseMirror container */
-::deep .milkdown-editor-wrapper,
-::deep .crepe,
-::deep .milkdown,
+/* ==========================================================================
+   CreatorTest.razor.css - Isolated Styles for WYSIWYG Text Editor Test
+   ========================================================================== */
+
+/* 1. BOUNDARY & SCROLLING RE-ENGINEERING */
+
+/* Stable height boundary and scrolling behavior on the editor wrapper */
+::deep .milkdown-editor-wrapper {
+    min-height: 350px !important;
+    max-height: 600px !important;
+    overflow-y: auto !important;
+    background-color: var(--bg-base) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-md) !important;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+::deep .milkdown-editor-wrapper:focus-within {
+    border-color: var(--accent) !important;
+    box-shadow: 0 0 0 1px var(--accent-glow) !important;
+}
+
+/* Fix Top Text Clipping on the ProseMirror editable surface */
+::deep .ProseMirror,
+::deep .crepe .editor,
 ::deep .milkdown .editor {
+    position: relative !important;
+    top: 0 !important;
+    transform: none !important;
+    padding: 1.5rem !important;
+    background-color: var(--bg-base) !important;
+    color: var(--text-main) !important;
+    outline: none !important;
+}
+
+/* Encapsulate Milkdown editor wrapper & ProseMirror container */
+::deep .crepe,
+::deep .milkdown {
     background-color: var(--bg-base) !important;
     background: var(--bg-base) !important;
     color: var(--text-main) !important;
@@ -10,25 +43,30 @@
 
 /* Headings and inline typography styles */
 ::deep .milkdown .editor h1,
-::deep .crepe h1 {
+::deep .crepe h1,
+::deep .ProseMirror h1 {
     margin-top: 1.5rem !important;
     margin-bottom: 1rem !important;
     font-size: 2rem !important;
     font-weight: 700 !important;
     color: var(--text-main) !important;
+    line-height: 1.25 !important;
 }
 
 ::deep .milkdown .editor h2,
-::deep .crepe h2 {
+::deep .crepe h2,
+::deep .ProseMirror h2 {
     margin-top: 1.25rem !important;
     margin-bottom: 0.75rem !important;
     font-size: 1.5rem !important;
     font-weight: 600 !important;
     color: var(--text-main) !important;
+    line-height: 1.3 !important;
 }
 
 ::deep .milkdown .editor code,
-::deep .crepe code {
+::deep .crepe code,
+::deep .ProseMirror code {
     background-color: rgba(16, 185, 129, 0.1) !important;
     color: var(--accent) !important;
     padding: 0.2rem 0.4rem !important;
@@ -37,6 +75,77 @@
     font-size: 0.85em !important;
 }
 
+/* 2. HIGH-FIDELITY GFM TABLE FORMATTING */
+::deep .crepe table,
+::deep .milkdown table,
+::deep .ProseMirror table {
+    width: 100% !important;
+    border-collapse: separate !important;
+    border-spacing: 0 !important;
+    margin: 1.5rem 0 !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    border: 1px solid var(--border) !important;
+    background-color: rgba(255, 255, 255, 0.01) !important;
+}
+
+::deep .crepe th,
+::deep .milkdown th,
+::deep .ProseMirror th {
+    background-color: rgba(255, 255, 255, 0.02) !important;
+    font-weight: 600 !important;
+    color: var(--text-main) !important;
+    padding: 10px 14px !important;
+    border-bottom: 2px solid var(--border) !important;
+    text-align: left !important;
+}
+
+::deep .crepe td,
+::deep .milkdown td,
+::deep .ProseMirror td {
+    padding: 12px 14px !important;
+    color: var(--text-main) !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+}
+
+::deep .crepe tr:last-child td,
+::deep .milkdown tr:last-child td,
+::deep .ProseMirror tr:last-child td {
+    border-bottom: none !important;
+}
+
+::deep .crepe tr:hover,
+::deep .milkdown tr:hover,
+::deep .ProseMirror tr:hover {
+    background-color: rgba(16, 185, 129, 0.03) !important;
+}
+
+/* 3. ACCENT SCHEME UNIFICATION */
+
+/* Line-height specifications for GFM lists & task lists */
+::deep .crepe ul,
+::deep .crepe ol,
+::deep .milkdown ul,
+::deep .milkdown ol,
+::deep .ProseMirror ul,
+::deep .ProseMirror ol {
+    line-height: 1.6 !important;
+}
+
+/* Bottom action toolbar extraction & styling */
+::deep .editor-actions {
+    display: flex !important;
+    justify-content: flex-end !important;
+    padding: 1rem 0 0 0 !important;
+    margin-top: 1rem !important;
+    border-top: 1px solid var(--border) !important;
+}
+
+
+/* ==========================================================================
+   Page Layout & Output Panel Styles
+   ========================================================================== */
+
 .creator-test-container {
     max-width: 1000px;
     margin: 2rem auto;