improve layout for big screens

deltachat-bot · Sep 18, 2024 · eb570a5 · eb570a5
1 parent 03b0671
commit eb570a5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/frontend/public/version.txt b/frontend/public/version.txt
@@ -1 +1 @@
-2.6.1
+2.7.0
diff --git a/frontend/src/components/BotItem.tsx b/frontend/src/components/BotItem.tsx
@@ -78,6 +78,7 @@ export default function BotItem({ bot, lastSync }: Props) {
           </IonBadge>{" "}
           {displayLastSeen(lastSync || new Date(), bot.lastSeen)}
           <div className="selectable">{bot.description}</div>
+          <br />
           <p>
             <strong>{_("admin")}</strong>
             {bot.admin.name}

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -3,7 +3,9 @@ import {
   IonPage,
   IonIcon,
   IonItem,
-  IonList,
+  IonGrid,
+  IonRow,
+  IonCol,
   IonSpinner,
   IonSearchbar,
   IonToast,
@@ -71,11 +73,15 @@ const Home: React.FC = () => {
       )}
       <IonContent fullscreen>
         {state.hash ? (
-          <IonList>
-            {results.map((bot) => (
-              <BotItem bot={bot} lastSync={state.lastSync || new Date()} />
-            ))}
-          </IonList>
+          <IonGrid>
+            <IonRow>
+              {results.map((bot) => (
+                <IonCol size="12" size-sm="6" size-lg="4" size-xl="3">
+                  <BotItem bot={bot} lastSync={state.lastSync || new Date()} />
+                </IonCol>
+              ))}
+            </IonRow>
+          </IonGrid>
         ) : (
           <div id="loading">
             <IonSpinner name="dots"></IonSpinner>