From e7a6a4b16b1019163daba70239eca96f1f386d28 Mon Sep 17 00:00:00 2001
From: edraft <sven.heidemann@sh-edraft.de>
Date: Sat, 14 Dec 2024 18:56:24 +0100
Subject: [PATCH] Design updates

---
 .../app/modules/admin/short-urls/short-urls.page.html | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/app/modules/admin/short-urls/short-urls.page.html b/web/src/app/modules/admin/short-urls/short-urls.page.html
index 3aa48dc..72ea87f 100644
--- a/web/src/app/modules/admin/short-urls/short-urls.page.html
+++ b/web/src/app/modules/admin/short-urls/short-urls.page.html
@@ -1,7 +1,7 @@
 <router-outlet></router-outlet>
 
 <ng-template #shortUrl let-url>
-    <div class="flex flex-col gap-2 bg rounded-l p-3">
+    <div class="flex flex-col gap-2 bg rounded-l p-3 w-full max-w-lg justify-between">
         <div class="flex flex-col gap-2">
             <h3>{{ url.shortUrl }}</h3>
             <div class="grid-container">
@@ -92,15 +92,16 @@
 
     <div class="divider"></div>
     <div class="bg2 rounded-xl p-3">
-        <div *ngFor="let url of shortUrlsWithoutGroup">
-            <ng-template [ngTemplateOutlet]="shortUrl" [ngTemplateOutletContext]="{ $implicit: url }"></ng-template>
+        <div class="flex flex-wrap gap-1.5">
+            <ng-template *ngFor="let url of shortUrlsWithoutGroup" [ngTemplateOutlet]="shortUrl"
+                         [ngTemplateOutletContext]="{ $implicit: url }"></ng-template>
         </div>
     </div>
 
     <div *ngFor="let group of groupsFromGroupedShortUrls" class="bg2 rounded-xl p-3">
         <div><h2>{{ group }}</h2></div>
-        <div class="flex flex-col gap-1.5">
-            <ng-template *ngFor="let url of groupedShortUrls[group]" [ngTemplateOutlet]="shortUrl"
+        <div class="flex flex-wrap gap-1.5">
+            <ng-template class="flex-1" *ngFor="let url of groupedShortUrls[group]" [ngTemplateOutlet]="shortUrl"
                          [ngTemplateOutletContext]="{ $implicit: url }"></ng-template>
         </div>
     </div>