From abad6c3844c2ebfece1d32f0bbb01922ce33b841 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Thu, 14 Oct 2021 18:49:40 +1000
Subject: [PATCH] layout tweaks to card info

- negative margins result in truncated text when the window size
is reduced, so avoid them
- having a 100% table inside a flexbox is not responsive - the table
does not adjust its size as the width is increased or decreased
- in order to look decent on narrow screens (eg phones), we allow
margin collapsing
- in order to look decent on wide screens, we limit the maximum
width to something that is readable
- hide some columns in portrait mode on narrow screens

I tried preserving the centering with margin-left/right: auto, but
could not get it looking right, so have had to move things back to
left alignment.
---
 ts/card-info/CardInfo.svelte |  6 +++---
 ts/card-info/Revlog.svelte   | 21 ++++++++++++++-------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/ts/card-info/CardInfo.svelte b/ts/card-info/CardInfo.svelte
index 91d276b58..c0c980f59 100644
--- a/ts/card-info/CardInfo.svelte
+++ b/ts/card-info/CardInfo.svelte
@@ -98,13 +98,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style>
     .container {
-        display: flex;
-        justify-content: center;
-        white-space: nowrap;
+        max-width: 40em;
     }
 
     .stats-table {
         width: 100%;
+        border-spacing: 1em 0;
+        border-collapse: collapse;
         text-align: start;
     }
 </style>
diff --git a/ts/card-info/Revlog.svelte b/ts/card-info/Revlog.svelte
index 4c9d0c0c7..b5e6f6f0b 100644
--- a/ts/card-info/Revlog.svelte
+++ b/ts/card-info/Revlog.svelte
@@ -81,22 +81,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <div class="revlog-container">
         <table class="revlog-table">
             <tr>
-                <th>{tr2.cardStatsReviewLogDate()}</th>
-                <th>{tr2.cardStatsReviewLogType()}</th>
+                <th class="left">{tr2.cardStatsReviewLogDate()}</th>
+                <th class="hidden-xs">{tr2.cardStatsReviewLogType()}</th>
                 <th>{tr2.cardStatsReviewLogRating()}</th>
                 <th>{tr2.cardStatsInterval()}</th>
-                <th>{tr2.cardStatsEase()}</th>
+                <th class="hidden-xs">{tr2.cardStatsEase()}</th>
                 <th>{tr2.cardStatsReviewLogTimeTaken()}</th>
             </tr>
             {#each revlogRows as row, _index}
                 <tr>
                     <td class="left"><b>{row.date}</b> @ {row.time}</td>
-                    <td class="center {row.reviewKindClass}">
+                    <td class="center hidden-xs {row.reviewKindClass}">
                         {row.reviewKind}
                     </td>
                     <td class="center {row.ratingClass}">{row.rating}</td>
                     <td class="center">{row.interval}</td>
-                    <td class="center">{row.ease}</td>
+                    <td class="center hidden-xs">{row.ease}</td>
                     <td class="right">{row.takenSecs}</td>
                 </tr>
             {/each}
@@ -118,12 +118,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .revlog-container {
-        margin: 4em -2em 0 -2em;
+        margin-top: 2em;
     }
 
     .revlog-table {
         width: 100%;
-        border-spacing: 2em 0em;
+        border-spacing: 1em 0;
+        border-collapse: collapse;
     }
 
     .revlog-learn {
@@ -138,4 +139,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .revlog-ease1 {
         color: var(--learn-count);
     }
+
+    @media only screen and (max-device-width: 480px) and (orientation: portrait) {
+        .hidden-xs {
+            display: none;
+        }
+    }
 </style>