Keep the Applications list's table inside its card (closes #262)
Check / check (pull_request) Skipped
Check / check (pull_request) Skipped
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, with a minimum width of 8rem so it stays readable in a narrow window, 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
This commit is contained in:
@@ -20,6 +20,11 @@ regress.
|
|||||||
|
|
||||||
# Completed Steps
|
# 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-01: Built images are tagged `upaas-<app>:<short hash>`, git's short
|
- 2026-10-01: Built images are tagged `upaas-<app>:<short hash>`, git's short
|
||||||
form of the commit built, instead of the deployment number. A redeploy of a
|
form of the commit built, instead of the deployment number. A redeploy of a
|
||||||
commit gives its tag to the new image; the old one is kept while the app runs
|
commit gives its tag to the new image; the old one is kept while the app runs
|
||||||
|
|||||||
@@ -0,0 +1,56 @@
|
|||||||
|
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")
|
||||||
|
assert.Contains(t, cellTag, "min-w-[8rem]",
|
||||||
|
"without a minimum width the URL is one character wide in a narrow window")
|
||||||
|
}
|
||||||
@@ -20,7 +20,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{if .AppStats}}
|
{{if .AppStats}}
|
||||||
<div class="card overflow-hidden">
|
<div class="card overflow-x-auto">
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<thead class="table-header">
|
<thead class="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
{{.App.Name}}
|
{{.App.Name}}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</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 min-w-[8rem]">{{.App.RepoURL}}</td>
|
||||||
<td class="text-gray-500">{{.App.Branch}}</td>
|
<td class="text-gray-500">{{.App.Branch}}</td>
|
||||||
<td>
|
<td>
|
||||||
{{if eq .App.Status "running"}}
|
{{if eq .App.Status "running"}}
|
||||||
|
|||||||
Reference in New Issue
Block a user