1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Fix ingress list line heights (#5949)

* Split ingress rules by multiple lines

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Force updating virtual list when rowHeights changed

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Replacing simple div selectors with more specific

.ingressRule classnames

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-02 15:24:53 +03:00 committed by GitHub
parent 07568839f6
commit 3d62d1c029
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 7 deletions

View File

@ -5,6 +5,10 @@
.Ingresses { .Ingresses {
.TableCell { .TableCell {
&.checkbox .Checkbox {
align-items: flex-start;
}
&.rules { &.rules {
flex-grow: 3.0; flex-grow: 3.0;
overflow-x: scroll; overflow-x: scroll;
@ -14,8 +18,13 @@
display: none; display: none;
} }
span:not(:last-of-type) { .ingressRule {
margin-right: 1em; overflow: hidden;
text-overflow: ellipsis;
}
.ingressRule + .ingressRule {
margin-top: 6px;
} }
} }

View File

@ -58,7 +58,7 @@ export class Ingresses extends React.Component {
computeRouteDeclarations(ingress).map(decl => ( computeRouteDeclarations(ingress).map(decl => (
decl.displayAsLink decl.displayAsLink
? ( ? (
<span key={decl.url}> <div key={decl.url} className="ingressRule">
<a <a
href={decl.url} href={decl.url}
rel="noreferrer" rel="noreferrer"
@ -68,12 +68,12 @@ export class Ingresses extends React.Component {
{decl.url} {decl.url}
</a> </a>
{`${decl.service}`} {`${decl.service}`}
</span> </div>
) )
: ( : (
<span key={decl.url}> <div key={decl.url} className="ingressRule">
{`${decl.url}${decl.service}`} {`${decl.url}${decl.service}`}
</span> </div>
) )
)), )),
<KubeObjectAge key="age" object={ingress} />, <KubeObjectAge key="age" object={ingress} />,

View File

@ -87,7 +87,7 @@ function VirtualListInner<T extends { getId(): string } | string>({
useEffect(() => { useEffect(() => {
try { try {
if (prevItems.current.length !== items.length || !isEqual(prevRowHeights.current, rowHeights)) { if (prevItems.current.length !== items.length || !isEqual(prevRowHeights.current, rowHeights)) {
listRef.current?.resetAfterIndex(0, false); listRef.current?.resetAfterIndex(0);
} }
} finally { } finally {
prevItems.current = items; prevItems.current = items;