From 881c1d2d5c749e4f1b29ac878121dbec70f46a27 Mon Sep 17 00:00:00 2001
From: "niklastasler@gmail.com" <niklastasler@gmail.com>
Date: Sat, 30 Dec 2023 16:28:39 +0100
Subject: [PATCH] feat: improve mobile ui

---
 templates/GameDetails.templ                | 15 ++++++----
 templates/GameDetails_templ.go             | 28 ++++++++++++-------
 templates/base.templ                       |  2 +-
 templates/components/game_card.templ       |  5 ++--
 templates/components/game_card_templ.go    |  4 +--
 templates/components/rounds_grid.templ     | 31 +++++++++++----------
 templates/components/rounds_grid_templ.go  | 32 +++++++++++++++-------
 templates/components/rounds_table.templ    |  2 +-
 templates/components/rounds_table_templ.go |  2 +-
 9 files changed, 75 insertions(+), 46 deletions(-)

diff --git a/templates/GameDetails.templ b/templates/GameDetails.templ
index 81518d2..9ba54b7 100644
--- a/templates/GameDetails.templ
+++ b/templates/GameDetails.templ
@@ -16,17 +16,22 @@ templ GameDetailsNavbar() {
 	</div>
 }
 
+
+const poll = false
+ 
 templ GameDetails (game skat.Game) {
 	@Base() {
-		<div hx-get={ fmt.Sprintf("/games/%v", game.ID) } hx-trigger="every 10s" hx-swap="none" hx-select-oob="#gamecard:outerHTML,#roundlist:outerHTML"></div>
+		if poll {
+			<div hx-get={ fmt.Sprintf("/games/%v", game.ID) } hx-trigger="every 10s" hx-swap="none" hx-select-oob="#gamecard:outerHTML,#roundlist:outerHTML"></div>
+		}
 		@GameDetailsNavbar()
 		<div class="container flex p-2  pt-4 mx-auto">
-			<div class="flex w-full flex-row flex-wrap-reverse gap-8 justify-around items-end">
-				<div id="roundlist" class=" justify-center">
-					<div class="hidden sm:flex justify-center">
+			<div class="flex w-full flex-row flex-wrap-reverse justify-around gap-8 items-end">
+				<div id="roundlist">
+					<div class="hidden sm:flex">
 						@component.RoundsTable(game)
 					</div>
-					<div class="sm:hidden flex w-full justify-center">
+					<div class="sm:hidden flex">
 						@component.RoundGrid(game)
 					</div>
 				</div>
diff --git a/templates/GameDetails_templ.go b/templates/GameDetails_templ.go
index ca574ad..658d24d 100644
--- a/templates/GameDetails_templ.go
+++ b/templates/GameDetails_templ.go
@@ -55,6 +55,8 @@ func GameDetailsNavbar() templ.Component {
 	})
 }
 
+const poll = false
+
 func GameDetails(game skat.Game) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
@@ -74,15 +76,21 @@ func GameDetails(game skat.Game) templ.Component {
 				templ_7745c5c3_Buffer = templ.GetBuffer()
 				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div hx-get=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(fmt.Sprintf("/games/%v", game.ID)))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
+			if poll {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(fmt.Sprintf("/games/%v", game.ID)))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"every 10s\" hx-swap=\"none\" hx-select-oob=\"#gamecard:outerHTML,#roundlist:outerHTML\"></div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"every 10s\" hx-swap=\"none\" hx-select-oob=\"#gamecard:outerHTML,#roundlist:outerHTML\"></div>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -90,7 +98,7 @@ func GameDetails(game skat.Game) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <div class=\"container flex p-2  pt-4 mx-auto\"><div class=\"flex w-full flex-row flex-wrap-reverse gap-8 justify-around items-end\"><div id=\"roundlist\" class=\" justify-center\"><div class=\"hidden sm:flex justify-center\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <div class=\"container flex p-2  pt-4 mx-auto\"><div class=\"flex w-full flex-row flex-wrap-reverse justify-around gap-8 items-end\"><div id=\"roundlist\"><div class=\"hidden sm:flex\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -98,7 +106,7 @@ func GameDetails(game skat.Game) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"sm:hidden flex w-full justify-center\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"sm:hidden flex\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
diff --git a/templates/base.templ b/templates/base.templ
index 92e6a67..575324b 100644
--- a/templates/base.templ
+++ b/templates/base.templ
@@ -15,7 +15,7 @@ templ Base() {
 			<script src="/static/theme-change.js"></script>
 			<script src="/static/sweetalert2.js"></script>
 		</head>
-		<body id="content">
+		<body  id="content">
 			{ children... }
 			@initSortable()
 			@initThemeChange()
diff --git a/templates/components/game_card.templ b/templates/components/game_card.templ
index 6f70022..68232a6 100644
--- a/templates/components/game_card.templ
+++ b/templates/components/game_card.templ
@@ -15,7 +15,7 @@ templ GameCard(game skat.Game, detailsBtn, editBtn, deleteBtn bool) {
 				}
 			</div>
 		</div>
-		<div class="card-body pt-5">
+		<div class="card-body justify-between pt-5">
 			<h2 class="card-title">{ game.GetDate() }</h2>
 			<div class="grid grid-cols-8 gap-y-3 items-center pt-3">
 				<div class="col-span-1">
@@ -81,9 +81,10 @@ templ GameCard(game skat.Game, detailsBtn, editBtn, deleteBtn bool) {
  						class="btn"
  						hx-delete={ fmt.Sprintf("/games/%v", game.ID) }
  						hx-target="#content"
+						hx-swap="outerHTML"
  						hx-trigger="confirmed"
  						_="on click call Swal.fire({title: 'Are you sure?', text:'Deletion cannot be undone', icon: 'question', showCancelButton: true, width: 300})
-            		if result.isConfirmed trigger confirmed"
+            		if result.isConfirmed remove .swal2-shown from #content then trigger confirmed"
 					>
 						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
 							<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>
diff --git a/templates/components/game_card_templ.go b/templates/components/game_card_templ.go
index e360f1a..808ad72 100644
--- a/templates/components/game_card_templ.go
+++ b/templates/components/game_card_templ.go
@@ -43,7 +43,7 @@ func GameCard(game skat.Game, detailsBtn, editBtn, deleteBtn bool) templ.Compone
 				return templ_7745c5c3_Err
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"card-body pt-5\"><h2 class=\"card-title\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"card-body justify-between pt-5\"><h2 class=\"card-title\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -158,7 +158,7 @@ func GameCard(game skat.Game, detailsBtn, editBtn, deleteBtn bool) templ.Compone
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#content\" hx-trigger=\"confirmed\" _=\"on click call Swal.fire({title: &#39;Are you sure?&#39;, text:&#39;Deletion cannot be undone&#39;, icon: &#39;question&#39;, showCancelButton: true, width: 300})\n            		if result.isConfirmed trigger confirmed\"><svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"></path></svg></button>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#content\" hx-swap=\"outerHTML\" hx-trigger=\"confirmed\" _=\"on click call Swal.fire({title: &#39;Are you sure?&#39;, text:&#39;Deletion cannot be undone&#39;, icon: &#39;question&#39;, showCancelButton: true, width: 300})\n            		if result.isConfirmed remove .swal2-shown from #content then trigger confirmed\"><svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"></path></svg></button>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
diff --git a/templates/components/rounds_grid.templ b/templates/components/rounds_grid.templ
index d547a16..9ae66c7 100644
--- a/templates/components/rounds_grid.templ
+++ b/templates/components/rounds_grid.templ
@@ -5,15 +5,15 @@ import "github.com/tarow/skat-counter/internal/skat/gen/model"
 import "fmt"
 
 templ RoundEntry(players []model.Player, round skat.Round, roundNumber int) {
-	<div class="card-body p-4 ">
-		<div class="card-actions flex flex-row justify-between items-center pb-3">
+	<div class="card-body p-4">
+		<div class="card-actions justify-between items-center pb-3">
 			<div class="avatar placeholder flex-1">
 				<div class="w-10 rounded-full bg-neutral text-neutral-content">
 					<span>{ toString(round.Value) }</span>
 				</div>
 			</div>
-			<h3 class="flex-1 justify-center card-title">Round { toString(roundNumber + 1) }</h3>
-			<div class="flex flex-row flex-wrap justify-end items-center flex-1">
+			<h3 class="card-title justify-center flex-1">Round { toString(roundNumber + 1) }</h3>
+			<div class="flex flex-row flex-1 flex-wrap justify-end items-center">
 				<button
  					class="btn btn-ghost btn-sm btn-square"
  					hx-get={ fmt.Sprintf("/games/%v/rounds/%v", round.GameID, round.ID) }
@@ -31,7 +31,7 @@ templ RoundEntry(players []model.Player, round skat.Round, roundNumber int) {
  					hx-target="#content"
  					hx-trigger="confirmed"
  					_="on click call Swal.fire({title: 'Are you sure?', text:'Deletion cannot be undone', icon: 'question', showCancelButton: true, width: 300})
-            					 if result.isConfirmed trigger confirmed"
+            		   if result.isConfirmed remove .swal2-shown from #content then trigger confirmed"
 				>
 					<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 " fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
 						<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>
@@ -48,7 +48,7 @@ templ RoundEntry(players []model.Player, round skat.Round, roundNumber int) {
 }
 
 templ TotalEntry(game skat.Game) {
-	<div class="card-body  p-0">
+	<div class="card-body p-0">
 		<div class="card-actions flex flex-row justify-between items-center  pl-4 pt-4  pb-3">
 			<div class="flex-1 justify-start">
 				<div class="w-fit p-3 rounded-full bg-neutral text-neutral-content">{ toString(game.FormatTotalPayment()) }</div>
@@ -71,17 +71,20 @@ templ TotalEntry(game skat.Game) {
 }
 
 templ RoundGrid(game skat.Game) {
-	<div class="card bg-base-200 shadow-xl">
-		<div class=" flex flex-row flex-wrap  justify-center">
+	<div class="card bg-base-200 shadow-xl ">
+	<div class="max-h-[50dvh] overflow-scroll">
 			for idx, round := range game.Rounds {
-				<div class="w-72">
+				<div >
 					@RoundEntry(game.Players, round, idx)
-					<div class="divider -mb-3"></div>
+					if idx != len(game.Rounds)-1 {
+						<div class="divider m-0"></div>
+					}
 				</div>
 			}
-		</div>
-		<div class="self-center">
-			@TotalEntry(game)
-		</div>
+			</div>
+		if len(game.Rounds) > 0{
+			<div class="divider m-0"></div>
+		}
+		@TotalEntry(game)
 	</div>
 }
diff --git a/templates/components/rounds_grid_templ.go b/templates/components/rounds_grid_templ.go
index 2a166c0..77e54f8 100644
--- a/templates/components/rounds_grid_templ.go
+++ b/templates/components/rounds_grid_templ.go
@@ -27,7 +27,7 @@ func RoundEntry(players []model.Player, round skat.Round, roundNumber int) templ
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"card-body p-4 \"><div class=\"card-actions flex flex-row justify-between items-center pb-3\"><div class=\"avatar placeholder flex-1\"><div class=\"w-10 rounded-full bg-neutral text-neutral-content\"><span>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"card-body p-4\"><div class=\"card-actions justify-between items-center pb-3\"><div class=\"avatar placeholder flex-1\"><div class=\"w-10 rounded-full bg-neutral text-neutral-content\"><span>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -36,7 +36,7 @@ func RoundEntry(players []model.Player, round skat.Round, roundNumber int) templ
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div></div><h3 class=\"flex-1 justify-center card-title\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div></div><h3 class=\"card-title justify-center flex-1\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -50,7 +50,7 @@ func RoundEntry(players []model.Player, round skat.Round, roundNumber int) templ
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3><div class=\"flex flex-row flex-wrap justify-end items-center flex-1\"><button class=\"btn btn-ghost btn-sm btn-square\" hx-get=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3><div class=\"flex flex-row flex-1 flex-wrap justify-end items-center\"><button class=\"btn btn-ghost btn-sm btn-square\" hx-get=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -66,7 +66,7 @@ func RoundEntry(players []model.Player, round skat.Round, roundNumber int) templ
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#content\" hx-trigger=\"confirmed\" _=\"on click call Swal.fire({title: &#39;Are you sure?&#39;, text:&#39;Deletion cannot be undone&#39;, icon: &#39;question&#39;, showCancelButton: true, width: 300})\n            					 if result.isConfirmed trigger confirmed\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"w-6 h-6 \" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"></path></svg></button></div></div><div class=\"flex w-full flex-row flex-wrap gap-2\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#content\" hx-trigger=\"confirmed\" _=\"on click call Swal.fire({title: &#39;Are you sure?&#39;, text:&#39;Deletion cannot be undone&#39;, icon: &#39;question&#39;, showCancelButton: true, width: 300})\n            		   if result.isConfirmed remove .swal2-shown from #content then trigger confirmed\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"w-6 h-6 \" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"></path></svg></button></div></div><div class=\"flex w-full flex-row flex-wrap gap-2\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -119,7 +119,7 @@ func TotalEntry(game skat.Game) templ.Component {
 			templ_7745c5c3_Var8 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"card-body  p-0\"><div class=\"card-actions flex flex-row justify-between items-center  pl-4 pt-4  pb-3\"><div class=\"flex-1 justify-start\"><div class=\"w-fit p-3 rounded-full bg-neutral text-neutral-content\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"card-body p-0\"><div class=\"card-actions flex flex-row justify-between items-center  pl-4 pt-4  pb-3\"><div class=\"flex-1 justify-start\"><div class=\"w-fit p-3 rounded-full bg-neutral text-neutral-content\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -203,12 +203,12 @@ func RoundGrid(game skat.Game) templ.Component {
 			templ_7745c5c3_Var15 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"card bg-base-200 shadow-xl\"><div class=\" flex flex-row flex-wrap  justify-center\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"card bg-base-200 shadow-xl \"><div class=\"max-h-[50dvh] overflow-scroll\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for idx, round := range game.Rounds {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"w-72\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -216,20 +216,32 @@ func RoundGrid(game skat.Game) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"divider -mb-3\"></div></div>")
+			if idx != len(game.Rounds)-1 {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"divider m-0\"></div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"self-center\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		if len(game.Rounds) > 0 {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"divider m-0\"></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
 		templ_7745c5c3_Err = TotalEntry(game).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/components/rounds_table.templ b/templates/components/rounds_table.templ
index e085968..b8e22a1 100644
--- a/templates/components/rounds_table.templ
+++ b/templates/components/rounds_table.templ
@@ -44,7 +44,7 @@ templ RoundsTable(game skat.Game) {
  									hx-target="#content"
  									hx-trigger="confirmed"
  									_="on click call Swal.fire({title: 'Are you sure?', text:'Deletion cannot be undone', icon: 'question', showCancelButton: true, width: 300})
-            					 if result.isConfirmed trigger confirmed"
+            					 if result.isConfirmed remove .swal2-shown from #content trigger confirmed"
 								>
 									<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 sm:w-5 sm:h-5 " fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
 										<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>
diff --git a/templates/components/rounds_table_templ.go b/templates/components/rounds_table_templ.go
index c742920..4a4bdf9 100644
--- a/templates/components/rounds_table_templ.go
+++ b/templates/components/rounds_table_templ.go
@@ -121,7 +121,7 @@ func RoundsTable(game skat.Game) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#content\" hx-trigger=\"confirmed\" _=\"on click call Swal.fire({title: &#39;Are you sure?&#39;, text:&#39;Deletion cannot be undone&#39;, icon: &#39;question&#39;, showCancelButton: true, width: 300})\n            					 if result.isConfirmed trigger confirmed\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"w-8 h-8 sm:w-5 sm:h-5 \" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"></path></svg></button></div></td></tr>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#content\" hx-trigger=\"confirmed\" _=\"on click call Swal.fire({title: &#39;Are you sure?&#39;, text:&#39;Deletion cannot be undone&#39;, icon: &#39;question&#39;, showCancelButton: true, width: 300})\n            					 if result.isConfirmed remove .swal2-shown from #content trigger confirmed\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"w-8 h-8 sm:w-5 sm:h-5 \" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"></path></svg></button></div></td></tr>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}