From 0c3fb96169e8389887ca2fa395912321f229ae2a Mon Sep 17 00:00:00 2001 From: clawbot Date: Tue, 29 Sep 2026 10:29:29 +0000 Subject: [PATCH] Widen the app page, double its log heights and move the logs (closes #246) The app page's content column is now at most 84rem wide instead of 56rem (max-w-4xl), set inline because the committed Tailwind CSS has no class for that width. The build log and container log boxes are 800px tall instead of 400px. The build log section moves to between the webhook URL and the environment variables, and the container log section moves to directly above the deploy key; nothing else moves. A new handler test renders the app page and checks the width, the section order and both log heights. Model: opus-5-5 --- TODO.md | 5 ++ internal/handlers/app_page_layout_test.go | 76 +++++++++++++++++++++ templates/app_detail.html | 82 +++++++++++------------ 3 files changed, 122 insertions(+), 41 deletions(-) create mode 100644 internal/handlers/app_page_layout_test.go diff --git a/TODO.md b/TODO.md index 15b6e9e..a3e2884 100644 --- a/TODO.md +++ b/TODO.md @@ -20,6 +20,11 @@ regress. # Completed Steps +- 2026-09-29: The app page is 50% wider on large screens (84rem instead of + 56rem), its build log and container log boxes are twice as tall, the build log + sits between the webhook URL and the environment variables, and the container + log sits above the deploy key (#246). + - 2026-09-29: The app page shows the app's branch as a label in its title, next to the status badge, instead of after the repository under it (#240). diff --git a/internal/handlers/app_page_layout_test.go b/internal/handlers/app_page_layout_test.go new file mode 100644 index 0000000..002ff3c --- /dev/null +++ b/internal/handlers/app_page_layout_test.go @@ -0,0 +1,76 @@ +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" +) + +// TestAppPageLayout checks the app page's width, the order of its sections, +// and the height of its two log boxes. +func TestAppPageLayout(t *testing.T) { + t.Parallel() + + testCtx := setupTestHandlers(t) + + createdApp, err := testCtx.appSvc.CreateApp(t.Context(), app.CreateAppInput{ + Name: "layout-app", + RepoURL: "git@example.com:user/layout-app.git", + }) + require.NoError(t, err) + + request := httptest.NewRequestWithContext( + t.Context(), http.MethodGet, "/apps/"+createdApp.ID, nil, + ) + request = addChiURLParams(request, map[string]string{"id": createdApp.ID}) + recorder := httptest.NewRecorder() + + testCtx.handlers.HandleAppDetail().ServeHTTP(recorder, request) + + require.Equal(t, http.StatusOK, recorder.Code) + + body := recorder.Body.String() + + _, afterMain, found := strings.Cut(body, "") + assert.Contains(t, mainTag, "max-width: 84rem;") + + sectionTitles := []string{ + "Container Logs", + "Deploy Key", + "Webhook URL", + "Last Deployment Build Logs", + "Environment Variables", + "Docker Labels", + "Volume Mounts", + "Port Mappings", + "Recent Deployments", + "Danger Zone", + } + + previousIndex := -1 + + for _, title := range sectionTitles { + index := strings.Index(body, ">"+title+"") + require.NotEqual(t, -1, index, "app page has no %q section", title) + assert.Greater(t, index, previousIndex, "%q section is out of order", title) + + previousIndex = index + } + + for _, logBox := range []string{"containerLogsWrapper", "buildLogsWrapper"} { + _, afterRef, found := strings.Cut(body, `x-ref="`+logBox+`"`) + require.True(t, found, "app page has no %s", logBox) + + logBoxTag, _, _ := strings.Cut(afterRef, ">") + assert.Contains(t, logBoxTag, "max-height: 800px;", logBox) + } +} diff --git a/templates/app_detail.html b/templates/app_detail.html index 02d65c5..eb6f146 100644 --- a/templates/app_detail.html +++ b/templates/app_detail.html @@ -5,7 +5,7 @@ {{define "content"}} {{template "nav" .}} -
+
+

Container Logs

+ +
+
+
+ 

+            

+            
+        

+    
+
     
     

         
Deploy Key

@@ -101,6 +121,26 @@
         

     
 
+    
+    

+        

+            
Last Deployment Build Logs

+            
+        

+        

+            

+                

+            

+            
+        

+    

+
     
     

         
Environment Variables

@@ -354,26 +394,6 @@
         
     

 
-    
-    

-        

-            
Container Logs

-            
-        

-        

-            

-                

-            

-            
-        

-    

-
     
     

         

@@ -413,26 +433,6 @@
         
     

 
-    
-    

-        

-            
Last Deployment Build Logs

-            
-        

-        

-            

-                

-            

-            
-        

-    

-
     
     

         
Danger Zone