From db3b47e42387c7e216310a39a871b046b89d6ea9 Mon Sep 17 00:00:00 2001
From: clawbot <sneak+clawbot@sneak.cloud>
Date: Fri, 2 Oct 2026 06:12:23 +0200
Subject: [PATCH] Keep the Applications list's table inside its card (closes
 #262)

Table cells never wrap, so a long repository URL made the table wider
than its card, which hides what does not fit and so cut off the Actions
column and the Deploy buttons. The repository URL now wraps within its
column, and the card scrolls sideways when the table still does not
fit. A handler test checks both. Every class used was already in the
committed static/css/tailwind.css.

Model: opus-5-5
Co-authored-by: clawbot <sneak+clawbot@sneak.cloud>
---
 TODO.md                                    |  5 ++
 internal/handlers/dashboard_layout_test.go | 54 ++++++++++++++++++++++
 templates/dashboard.html                   |  4 +-
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 internal/handlers/dashboard_layout_test.go

diff --git a/TODO.md b/TODO.md
index a4446ef..e14276c 100644
--- a/TODO.md
+++ b/TODO.md
@@ -20,6 +20,11 @@ regress.
 
 # Completed Steps
 
+- 2026-10-02: On the Applications list, a long repository URL now wraps within
+  its column instead of making the table wider than its card, which cut off the
+  Actions column and the Deploy buttons. In a window too narrow for the table,
+  the card scrolls sideways instead of cutting the table off (#262).
+
 - 2026-10-02: `docker build .` no longer sends git-ignored files, such as
   `.env.local`, `*.key` files or upaasd's `data/` directory with its session
   key, into the build stages and the build cache: `.dockerignore` now leaves out
diff --git a/internal/handlers/dashboard_layout_test.go b/internal/handlers/dashboard_layout_test.go
new file mode 100644
index 0000000..2ab09da
--- /dev/null
+++ b/internal/handlers/dashboard_layout_test.go
@@ -0,0 +1,54 @@
+package handlers_test
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"sneak.berlin/go/upaas/internal/service/app"
+)
+
+// TestDashboardTableFitsCard checks that the card around the app table
+// scrolls sideways instead of hiding what does not fit, and that a long
+// repository URL wraps instead of pushing the action buttons out.
+func TestDashboardTableFitsCard(t *testing.T) {
+	t.Parallel()
+
+	testCtx := setupTestHandlers(t)
+
+	repoURL := "https://git.example.com/user/" +
+		"a-repository-name-long-enough-to-push-the-action-buttons-out.git"
+
+	_, err := testCtx.appSvc.CreateApp(t.Context(), app.CreateAppInput{
+		Name:    "long-url-app",
+		RepoURL: repoURL,
+	})
+	require.NoError(t, err)
+
+	request := httptest.NewRequestWithContext(t.Context(), http.MethodGet, "/", nil)
+	recorder := httptest.NewRecorder()
+
+	testCtx.handlers.HandleDashboard().ServeHTTP(recorder, request)
+
+	require.Equal(t, http.StatusOK, recorder.Code)
+
+	body := recorder.Body.String()
+
+	beforeTable, _, found := strings.Cut(body, `<table class="table">`)
+	require.True(t, found, "dashboard has no app table")
+
+	cardTag := beforeTable[strings.LastIndex(beforeTable, "<div"):]
+	assert.Contains(t, cardTag, "overflow-x-auto")
+	assert.NotContains(t, cardTag, "overflow-hidden")
+
+	beforeURL, _, found := strings.Cut(body, ">"+repoURL+"</td>")
+	require.True(t, found, "dashboard has no repository cell")
+
+	cellTag := beforeURL[strings.LastIndex(beforeURL, "<td"):]
+	assert.Contains(t, cellTag, "whitespace-normal")
+	assert.Contains(t, cellTag, "break-all")
+}
diff --git a/templates/dashboard.html b/templates/dashboard.html
index ff66e1c..18fb28f 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -20,7 +20,7 @@
     </div>
 
     {{if .AppStats}}
-    <div class="card overflow-hidden">
+    <div class="card overflow-x-auto">
         <table class="table">
             <thead class="table-header">
                 <tr>
@@ -41,7 +41,7 @@
                             {{.App.Name}}
                         </a>
                     </td>
-                    <td class="text-gray-500 font-mono text-xs">{{.App.RepoURL}}</td>
+                    <td class="text-gray-500 font-mono text-xs whitespace-normal break-all">{{.App.RepoURL}}</td>
                     <td class="text-gray-500">{{.App.Branch}}</td>
                     <td>
                         {{if eq .App.Status "running"}}