From 1cee86487512cf32d57e964ddd25bb29a007f266 Mon Sep 17 00:00:00 2001
From: RumovZ <gp5glkw78@relay.firefox.com>
Date: Mon, 10 Jan 2022 03:50:48 +0100
Subject: [PATCH] Fix padding and alignment inside revlog table (#1576)

* Use nested tables in revlog

This allows for centered rows, while still preserving internal
alignment.

* Fix hidden columns

* Replace inner tables with flexbox divs

* Replace revlog table with flexbox divs

* Replace flex-gap in revlog

Unsupported on iOS and Qt5.
---
 ts/card-info/Revlog.svelte | 127 ++++++++++++++++++++++++++-----------
 1 file changed, 90 insertions(+), 37 deletions(-)

diff --git a/ts/card-info/Revlog.svelte b/ts/card-info/Revlog.svelte
index 8ba2733d4..44e011566 100644
--- a/ts/card-info/Revlog.svelte
+++ b/ts/card-info/Revlog.svelte
@@ -77,47 +77,100 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 {#if revlog.length > 0}
-    <table class="revlog-table">
-        <tr>
-            <th class="left">{tr2.cardStatsReviewLogDate()}</th>
-            <th class="center hidden-xs">{tr2.cardStatsReviewLogType()}</th>
-            <th class="center">{tr2.cardStatsReviewLogRating()}</th>
-            <th class="right">{tr2.cardStatsInterval()}</th>
-            <th class="center hidden-xs">{tr2.cardStatsEase()}</th>
-            <th class="right">{tr2.cardStatsReviewLogTimeTaken()}</th>
-        </tr>
-        {#each revlogRows as row, _index}
-            <tr>
-                <td class="left"><b>{row.date}</b> @ {row.time}</td>
-                <td class="center hidden-xs {row.reviewKindClass}">
-                    {row.reviewKind}
-                </td>
-                <td class="center {row.ratingClass}">{row.rating}</td>
-                <td class="right">{row.interval}</td>
-                <td class="center hidden-xs">{row.ease}</td>
-                <td class="right">{row.takenSecs}</td>
-            </tr>
-        {/each}
-    </table>
+    <div class="revlog-table">
+        <div class="column">
+            <div class="column-head">{tr2.cardStatsReviewLogDate()}</div>
+            <div class="column-content">
+                {#each revlogRows as row, _index}
+                    <div><b>{row.date}</b> @ {row.time}</div>
+                {/each}
+            </div>
+        </div>
+        <div class="column hidden-xs">
+            <div class="column-head">{tr2.cardStatsReviewLogType()}</div>
+            <div class="column-content">
+                {#each revlogRows as row, _index}
+                    <div class={row.reviewKindClass}>
+                        {row.reviewKind}
+                    </div>
+                {/each}
+            </div>
+        </div>
+        <div class="column">
+            <div class="column-head">{tr2.cardStatsReviewLogRating()}</div>
+            <div class="column-content">
+                {#each revlogRows as row, _index}
+                    <div class={row.ratingClass}>{row.rating}</div>
+                {/each}
+            </div>
+        </div>
+        <div class="column">
+            <div class="column-head">{tr2.cardStatsInterval()}</div>
+            <div class="column-content right">
+                {#each revlogRows as row, _index}
+                    <div>{row.interval}</div>
+                {/each}
+            </div>
+        </div>
+        <div class="column hidden-xs">
+            <div class="column-head">{tr2.cardStatsEase()}</div>
+            <div class="column-content">
+                {#each revlogRows as row, _index}
+                    <div>{row.ease}</div>
+                {/each}
+            </div>
+        </div>
+        <div class="column">
+            <div class="column-head">{tr2.cardStatsReviewLogTimeTaken()}</div>
+            <div class="column-content right">
+                {#each revlogRows as row, _index}
+                    <div>{row.takenSecs}</div>
+                {/each}
+            </div>
+        </div>
+    </div>
 {/if}
 
-<style>
-    .left {
-        text-align: start;
-    }
-
-    .right {
-        text-align: end;
-    }
-
-    .center {
-        text-align: center;
-    }
-
+<style lang="scss">
     .revlog-table {
         width: 100%;
-        border-spacing: 1em 0;
-        border-collapse: collapse;
+        max-width: 50em;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        white-space: nowrap;
+    }
+
+    .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        &:not(:last-child) {
+            margin-right: 0.5em;
+        }
+    }
+
+    .column-head {
+        font-weight: bold;
+    }
+
+    .column-content {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        &.right {
+            align-items: flex-end;
+        }
+
+        > div:empty::after {
+            /* prevent collapsing of empty rows */
+            content: "\00a0";
+        }
     }
 
     .revlog-learn {