Skip to content

Commit 77ee483

Browse files
misha-dbmisha-db
committed
Split view optimizations
1 parent da0b08f commit 77ee483

3 files changed

Lines changed: 134 additions & 24 deletions

File tree

‎packages/databricks-vscode/resources/webview-ui/uc-detail.css‎

Lines changed: 104 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,14 @@ body.content #state-content {
9797
opacity: 1;
9898
}
9999

100+
#header-main {
101+
display: flex;
102+
align-items: flex-start;
103+
gap: 12px;
104+
flex: 1;
105+
min-width: 160px;
106+
}
107+
100108
#header-text {
101109
flex: 1;
102110
min-width: 0;
@@ -107,15 +115,21 @@ body.content #state-content {
107115
font-size: 1.05em;
108116
font-weight: 700;
109117
line-height: 1.3;
110-
word-break: break-all;
118+
/* word-break: keep-all */
119+
white-space: nowrap;
120+
overflow: hidden;
121+
text-overflow: ellipsis;
111122
color: var(--vscode-editor-foreground);
112123
letter-spacing: -0.01em;
113124
}
114125

115126
#header-breadcrumb {
116127
font-size: 0.78em;
117128
color: var(--vscode-descriptionForeground);
118-
word-break: break-all;
129+
/* word-break: keep-all; */
130+
white-space: nowrap;
131+
overflow: hidden;
132+
text-overflow: ellipsis;
119133
font-family: var(--vscode-editor-font-family, monospace);
120134
opacity: 0.85;
121135
margin-bottom: 6px;
@@ -326,7 +340,7 @@ body.content #state-content {
326340
.table-wrap {
327341
border: 1px solid var(--vscode-settings-dropdownListBorder, transparent);
328342
border-radius: 5px;
329-
overflow: hidden;
343+
overflow: auto;
330344
background: var(--vscode-editor-background);
331345
}
332346

@@ -463,7 +477,6 @@ pre.code-block {
463477
flex-wrap: wrap;
464478
flex-shrink: 0;
465479
align-self: flex-start;
466-
margin-left: auto;
467480
padding: 0;
468481
}
469482

@@ -652,7 +665,8 @@ pre.code-block {
652665
position: relative;
653666
display: flex;
654667
align-items: center;
655-
width: 220px;
668+
width: 100%;
669+
max-width: 320px;
656670
}
657671
.search-icon {
658672
position: absolute;
@@ -781,3 +795,88 @@ body[data-vscode-theme-kind="vscode-light"] .hljs-title {
781795
body[data-vscode-theme-kind="vscode-light"] .hljs-variable {
782796
color: #001080;
783797
}
798+
799+
/* ─── Narrow / split-view layout ──────────────── */
800+
/*
801+
* Triggered when the detail panel is narrow (e.g. opened beside a notebook
802+
* or query editor). Tighter spacing prevents unnecessary vertical scrolling
803+
* and keeps the most important content above the fold.
804+
*/
805+
@media (max-width: 420px) {
806+
#header {
807+
padding: 12px 12px 10px;
808+
gap: 8px;
809+
}
810+
811+
#header-main {
812+
gap: 8px;
813+
}
814+
815+
#search-bar {
816+
padding: 6px 12px;
817+
}
818+
819+
.section {
820+
padding-left: 12px;
821+
padding-right: 12px;
822+
}
823+
824+
.section + .section {
825+
padding-top: 12px;
826+
}
827+
828+
.tab-btn {
829+
padding: 7px 10px 6px;
830+
}
831+
832+
/* Narrower label column so values have more room */
833+
.prop-row {
834+
grid-template-columns: minmax(80px, 38%) 1fr;
835+
}
836+
837+
#extra-props-list .prop-row {
838+
grid-template-columns: minmax(100px, 55%) 1fr;
839+
}
840+
841+
/* Allow column names to wrap rather than forcing horizontal scroll */
842+
td.col-name {
843+
white-space: normal;
844+
word-break: break-word;
845+
}
846+
847+
/* Truncate long comments to a single line so rows stay compact */
848+
td.col-comment {
849+
max-width: 100px;
850+
overflow: hidden;
851+
text-overflow: ellipsis;
852+
white-space: nowrap;
853+
}
854+
}
855+
856+
/* Very narrow: collapse action button labels to icon-only */
857+
@media (max-width: 360px) {
858+
.btn-label {
859+
display: none;
860+
}
861+
862+
.action-btn {
863+
padding: 5px 7px;
864+
}
865+
866+
/* Reduce header icon to reclaim ~8px of horizontal space */
867+
#header-icon-wrap {
868+
width: 28px;
869+
height: 28px;
870+
border-radius: 6px;
871+
}
872+
873+
#header-icon-wrap svg {
874+
width: 14px;
875+
height: 14px;
876+
}
877+
878+
#header-icon {
879+
width: 22px;
880+
height: 22px;
881+
}
882+
}

‎packages/databricks-vscode/resources/webview-ui/uc-detail.html‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,25 @@
2222
<div id="state-content">
2323
<!-- Header -->
2424
<div id="header">
25-
<div id="header-icon-wrap">
26-
<img id="header-icon" style="display:none" />
27-
<svg id="header-svg" viewBox="0 0 24 24"></svg>
28-
</div>
29-
<div id="header-text">
30-
<h1 id="header-name"></h1>
31-
<div id="header-breadcrumb"></div>
32-
<div id="header-badges">
33-
<span id="header-kind-badge" class="kind-badge"></span>
34-
<span
35-
id="header-status-badge"
36-
class="status-badge"
37-
style="display: none"
38-
></span>
25+
<div id="header-main">
26+
<div id="header-icon-wrap">
27+
<img id="header-icon" style="display: none" />
28+
<svg id="header-svg" viewBox="0 0 24 24"></svg>
29+
</div>
30+
<div id="header-text">
31+
<h1 id="header-name"></h1>
32+
<div id="header-breadcrumb"></div>
33+
<div id="header-badges">
34+
<span id="header-kind-badge" class="kind-badge"></span>
35+
<span
36+
id="header-status-badge"
37+
class="status-badge"
38+
style="display: none"
39+
></span>
40+
</div>
3941
</div>
4042
</div>
41-
<!-- Actions — moved inside header, naturally right-aligned -->
43+
<!-- Actions — wrap to next line when space is tight -->
4244
<div id="header-actions">
4345
<button class="action-btn primary" id="btn-copy">
4446
<svg viewBox="0 0 24 24">
@@ -47,7 +49,7 @@ <h1 id="header-name"></h1>
4749
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
4850
/>
4951
</svg>
50-
Copy full name
52+
<span class="btn-label">Copy full name</span>
5153
</button>
5254
<span id="link-external"></span>
5355
</div>
@@ -116,7 +118,11 @@ <h1 id="header-name"></h1>
116118
</div>
117119

118120
<!-- Children (schemas / schema contents / model versions) -->
119-
<div id="section-children" class="section" style="display: none">
121+
<div
122+
id="section-children"
123+
class="section"
124+
style="display: none"
125+
>
120126
<div class="section-header">
121127
<span class="section-title" id="children-title"></span>
122128
<span id="children-count" class="section-count"></span>
@@ -202,7 +208,11 @@ <h1 id="header-name"></h1>
202208
<!-- Moved from overview: basic kind properties -->
203209
<div id="section-properties" class="section">
204210
<div class="section-header">
205-
<span class="section-title" id="section-properties-title">About this table</span>
211+
<span
212+
class="section-title"
213+
id="section-properties-title"
214+
>About this table</span
215+
>
206216
</div>
207217
<div id="props-list" class="props-list"></div>
208218
</div>

‎packages/databricks-vscode/resources/webview-ui/uc-detail.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -487,7 +487,8 @@ function renderActions(data) {
487487
a.href = data.exploreUrl;
488488
a.innerHTML =
489489
`<svg viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>` +
490-
`<polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>Open in Databricks`;
490+
`<polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>` +
491+
`<span class="btn-label">Open in Databricks</span>`;
491492
linkContainer.appendChild(a);
492493
}
493494
}

0 commit comments

Comments
 (0)