Redesign Sketch top bar with tab-based interface
- Replace emoji-only buttons with tabs showing both icons and text
- Reorganize container status to hide detailed info behind (i) button
- Keep only essential info visible: hostname, working dir, git repo, and cost
- Improve layout of top banner components
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 40e5512..f74fd59 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -55,16 +55,18 @@
/* Top banner with combined elements */
#top-banner {
display: flex;
- align-self: flex-start;
+ align-self: stretch;
justify-content: space-between;
align-items: center;
- padding: 5px 20px;
+ padding: 0 20px;
margin-bottom: 0;
border-bottom: 1px solid #eee;
- gap: 10px;
+ gap: 20px;
background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- max-width: 100%;
+ width: 100%;
+ height: 48px;
+ padding-right: 30px; /* Extra padding on the right to prevent elements from hitting the edge */
}
/* View mode container styles - mirroring timeline.css structure */
@@ -137,7 +139,8 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- max-width: 33%;
+ max-width: 25%;
+ padding: 6px 0;
}
.refresh-control {
@@ -147,6 +150,9 @@
flex-wrap: nowrap;
white-space: nowrap;
flex-shrink: 0;
+ gap: 15px;
+ padding-left: 15px;
+ margin-right: 50px;
}
.refresh-button {
@@ -167,7 +173,6 @@
.poll-updates {
display: flex;
align-items: center;
- margin: 0 5px;
font-size: 12px;
}
`;
@@ -551,13 +556,15 @@
<h2 id="chatTitle" class="chat-title">${this.title}</h2>
</div>
+ <!-- Views section with tabs -->
+ <sketch-view-mode-select></sketch-view-mode-select>
+
+ <!-- Container status info -->
<sketch-container-status
.state=${this.containerState}
></sketch-container-status>
<div class="refresh-control">
- <sketch-view-mode-select></sketch-view-mode-select>
-
<button id="stopButton" class="refresh-button stop-button">
Stop
</button>