Skip to content

Commit a555cd4

Browse files
committed
fix(plugins/plugin-client-common): TopNavSidecar tabs easily overflow with narrower windows
Fixes #4735
1 parent 0f2e1e1 commit a555cd4

File tree

3 files changed

+72
-2
lines changed

3 files changed

+72
-2
lines changed

plugins/plugin-client-common/web/css/static/sidecar-carbon.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
/*
2+
* Copyright 2017-2020 IBM Corporation
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
@import "../../scss/components/common/narrow-window";
18+
119
/* override the carbon color when tabbing through sidecar tabs */
220
.bx--tabs__nav-item:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled):not(.bx--tabs__nav-item--selected)
321
.bx--tabs__nav-link:focus,
@@ -84,3 +102,21 @@ body[kui-theme-style] a.bx--tabs__nav-link {
84102
color: var(--color-text-01) !important;
85103
border-color: var(--color-text-01) !important;
86104
}
105+
106+
@include somewhat-narrow-window {
107+
[kui-theme-style] .kui--sidecar {
108+
a.bx--tabs__nav-link,
109+
a.bx--tabs__nav-link:active {
110+
min-width: 6em;
111+
}
112+
}
113+
}
114+
115+
@include medium-width-window {
116+
[kui-theme-style] .kui--sidecar {
117+
a.bx--tabs__nav-link,
118+
a.bx--tabs__nav-link:active {
119+
min-width: 7em;
120+
}
121+
}
122+
}

plugins/plugin-client-common/web/css/static/split-pane.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
* limitations under the License.
1515
*/
1616

17+
@import '../../scss/components/common/narrow-window';
18+
1719
$size: 0.25em;
1820
$opacity: 0.1;
1921
$opacity-hover: 0.2;
@@ -96,7 +98,7 @@ $background-color: var(--color-base06);
9698
}
9799
}
98100

99-
@media (max-width: 44rem) {
101+
@include narrow-window {
100102
.SplitPane.vertical:not(.kui--sidecar-closed) {
101103
.Pane1 {
102104
flex: 0 !important;

plugins/plugin-client-common/web/scss/components/common/_narrow-window.scss

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,37 @@
1+
/*
2+
* Copyright 2020 IBM Corporation
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
$narrow-upper-bound: 46rem;
18+
$somewhat-narrow-upper-bound: 60rem;
19+
$medium-width-upper-bound: 68rem;
20+
21+
@mixin medium-width-window {
22+
@media (min-width: $somewhat-narrow-upper-bound) AND (max-width: $medium-width-upper-bound) {
23+
@content;
24+
}
25+
}
26+
27+
@mixin somewhat-narrow-window {
28+
@media (min-width: $narrow-upper-bound) AND (max-width: $somewhat-narrow-upper-bound) {
29+
@content;
30+
}
31+
}
32+
133
@mixin narrow-window {
2-
@media (max-width: 44rem) {
34+
@media (max-width: $narrow-upper-bound) {
335
@content;
436
}
537

0 commit comments

Comments
 (0)