Fix tab content misaligned in RTL mode. Fix #3658

This commit is contained in:
Tom Najdek 2024-02-01 15:35:17 +01:00
parent aee38791a7
commit 6efbf4c2ec
No known key found for this signature in database
GPG key ID: EEC61A7B4C667D77
2 changed files with 12 additions and 5 deletions

View file

@ -289,7 +289,7 @@ const TabBar = forwardRef(function (props, ref) {
tabIndex="-1"
>
{icon}
<div className="tab-name" dir="auto">{title}</div>
<div className="tab-name">{title}</div>
<div
className="tab-close"
onClick={(event) => handleTabClose(event, id)}

View file

@ -161,8 +161,8 @@
min-width: 100px;
height: 28px;
line-height: 16px;
padding-right: 22px;
padding-left: 6px;
padding-inline-end: 22px;
padding-inline-start: 6px;
display: flex;
align-items: center;
border-radius: 5px;
@ -201,9 +201,16 @@
line-height: 1.38461538em;
margin-inline-start: 4px;
overflow: hidden;
text-align: left;
text-align: start;
white-space: nowrap;
mask-image: linear-gradient(to left, transparent 0px, var(--fill-primary) 20px);
&:dir(ltr) {
mask-image: linear-gradient(to left, transparent 0px, var(--fill-primary) 20px);
}
&:dir(rtl) {
mask-image: linear-gradient(to right, transparent 0px, var(--fill-primary) 20px);
}
}
.tab-icon {