Modernize and streamline Sketch top bar UI
Comprehensive improvements to the top bar interface:
Removed Elements:
- Poll checkbox and all polling UI controls
- Network status indicator and all status messages
- Dotted underlines from tooltip elements
Button Improvements:
- Added SVG icons to Restart and Stop buttons
- Made buttons responsive (text hides below 1400px)
- Stop button now disabled when no active calls
Layout Simplification:
- Simplified hostname display (outside hostname only)
- Simplified working directory display (outside directory only)
- Repositioned tab chooser for better layout
- Improved responsive behavior across viewport sizes
Enhanced Features:
- Added GitHub repo auto-detection with clickable links
- Improved VSCode integration with button styling
- Changed 'SSH Connection' to 'Connect to Container'
- Enhanced tooltips with more descriptive text
The UI is now cleaner, more responsive, and provides a better user experience
across different screen sizes.
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-view-mode-select.ts b/webui/src/web-components/sketch-view-mode-select.ts
index 4c3c91f..3b94303 100644
--- a/webui/src/web-components/sketch-view-mode-select.ts
+++ b/webui/src/web-components/sketch-view-mode-select.ts
@@ -35,6 +35,16 @@
white-space: nowrap;
}
+ @media (max-width: 1400px) {
+ .tab-btn span:not(.tab-icon) {
+ display: none;
+ }
+
+ .tab-btn {
+ padding: 8px 10px;
+ }
+ }
+
.tab-btn:not(:last-child) {
border-right: 1px solid #eee;
}