From 022d84789382bcd957e5859180116417ef1ba251 Mon Sep 17 00:00:00 2001
From: Joel-David <git@joeldavid.dev>
Date: Tue, 23 Jul 2024 23:24:25 +0800
Subject: [PATCH 1/2] Changed to grid instead of flex

---
 Chronos/Services/ExportService.swift | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/Chronos/Services/ExportService.swift b/Chronos/Services/ExportService.swift
index 6a36235..115b7e0 100644
--- a/Chronos/Services/ExportService.swift
+++ b/Chronos/Services/ExportService.swift
@@ -161,7 +161,7 @@ extension ExportService {
         let document: Node = .document(
             .html(
                 .head(
-                    [.style(safe: """
+                    .style(safe: """
                         body {
                             font-family: sans-serif;
                             max-width: 1000px;
@@ -169,13 +169,12 @@ extension ExportService {
                             padding: 20px;
                         }
                         .token-container {
-                            display: flex;
-                            flex-wrap: wrap;
-                            justify-content: space-around;
+                            display: grid;
+                            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+                            gap: 20px;
+                            padding-top: 12px;
                         }
                         .token-card {
-                            flex: 0 0 45%;
-                            margin: 10px;
                             padding: 20px;
                             border: 1px solid #ccc;
                             border-radius: 6px;
@@ -206,17 +205,11 @@ extension ExportService {
                             justify-content: space-between;
                             align-items: center;
                         }
-                        @media (max-width: 800px) {
-                            .token-card {
-                                flex: 1 0 100%;
-                            }
-                        }
-                    """)]
+                    """)
                 ),
                 .body(
                     .div(attributes: [.class("header-container")],
-                         .h1(attributes: [.style(safe: "font-weight: 700;")], "Chronos Export"),
-                         .div()),
+                         .h1(attributes: [.style(safe: "font-weight: 700;")], "Chronos Export")),
                     .div(attributes: [.class("header-container")],
                          .h2(attributes: [.style(safe: "font-weight: 500; flex-grow: 1;")], "\(Date().formatted(verbatimStyle))"),
                          .h2(attributes: [.style(safe: "font-weight: 500; text-align: right;")], "No. of Tokens: \(exportVault.tokens?.count.description ?? "Error")")),
@@ -238,7 +231,6 @@ extension ExportService {
         } ?? ""
 
         let periodNode: Node = token.type.rawValue == "TOTP" ? .div(.text("Period: "), .code("\(token.period.description)")) : .text("")
-
         let counterNode: Node = token.type.rawValue == "HOTP" ? .div(.text("Counter: "), .code("\(token.counter.description)")) : .text("")
 
         return Node.div(

From 23bf748728f95a15570c1a580f4b452730135e92 Mon Sep 17 00:00:00 2001
From: Joel-David <git@joeldavid.dev>
Date: Tue, 23 Jul 2024 23:34:52 +0800
Subject: [PATCH 2/2] updated css

---
 Chronos/Services/ExportService.swift | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Chronos/Services/ExportService.swift b/Chronos/Services/ExportService.swift
index 115b7e0..6842b4e 100644
--- a/Chronos/Services/ExportService.swift
+++ b/Chronos/Services/ExportService.swift
@@ -164,13 +164,13 @@ extension ExportService {
                     .style(safe: """
                         body {
                             font-family: sans-serif;
-                            max-width: 1000px;
+                            max-width: 1100px;
                             margin: 0 auto;
                             padding: 20px;
                         }
                         .token-container {
                             display: grid;
-                            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+                            grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
                             gap: 20px;
                             padding-top: 12px;
                         }