mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-11 14:14:36 +08:00
Jonathan Garbee
3f710c7412
The scope menu is restricted to a specific height. However if a user was to have more than would fit in that, they were unable to reach them. This patch applies automatic overflow on the y axis to the menu. If the amount of scopes fits in that height, they will have no scrollbar. A scrollbar will appear when more than can fit within the menu are present. This allows users to get access to all scopes available regardless of the menu height. Screenshots: [Before] - https://drive.google.com/file/d/1QK6n3HLUFPKPKRmKMp_K0z-s7E7fmOKc/view?usp=sharing [After] - https://drive.google.com/file/d/16pFNHUe5oCNfasdpPcw_a5PSZrHFrRIX/view?usp=sharing Bug: 1038461 Change-Id: Ia36b00d0b991a9614c1c7a2a2cf6e95540ca75e1 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2061128 Commit-Queue: Mathias Bynens <mathias@chromium.org> Reviewed-by: Mathias Bynens <mathias@chromium.org>
41 lines
720 B
CSS
41 lines
720 B
CSS
/*
|
|
* Copyright 2017 The Chromium Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style license that can be
|
|
* found in the LICENSE file.
|
|
*/
|
|
|
|
:host {
|
|
padding: 2px 1px 2px 2px;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 36px;
|
|
justify-content: center;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.badge {
|
|
pointer-events: none;
|
|
margin-right: 4px;
|
|
display: inline-block;
|
|
height: 15px;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #999;
|
|
margin-right: 3px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
:host(.highlighted) .subtitle {
|
|
color: inherit;
|
|
}
|