gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-18 14:31:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

CSS fix: truncate long base branch names

Browse Source
This commit is contained in:
Pavel Laptev 2024-05-03 22:39:36 +02:00
parent aa9a775842
commit fb6dd2429e
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/src/lib/components/BaseBranchCard.svelte
View File

@ -38,14 +38,14 @@
{#if !isNavCollapsed} {#if !isNavCollapsed}
<div class="content"> <div class="content">
<div class="row_1"> <div class="button-head">
<span class="text-base-14 text-semibold trunk-label">Trunk</span> <span class="text-base-14 text-semibold trunk-label">Trunk</span>
{#if ($base?.behind || 0) > 0} {#if ($base?.behind || 0) > 0}
<Badge count={$base?.behind || 0} help="Unmerged upstream commits" /> <Badge count={$base?.behind || 0} help="Unmerged upstream commits" />
{/if} {/if}
<SyncButton /> <SyncButton />
</div> </div>
<div class="row_2 text-base-12"> <div class="base-branch-label">
{#if $base?.remoteUrl.includes('github.com')} {#if $base?.remoteUrl.includes('github.com')}
<!-- GitHub logo --> <!-- GitHub logo -->
<svg <svg
@ -64,7 +64,7 @@
{:else} {:else}
<Icon name="branch" /> <Icon name="branch" />
{/if} {/if}
{$base?.branchName} <span class="text-base-12">{$base?.branchName}</span>
</div> </div>
</div> </div>
{/if} {/if}
@ -96,21 +96,29 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--size-8); gap: var(--size-8);
overflow: hidden;
} }
.trunk-label { .trunk-label {
color: var(--clr-text-1); color: var(--clr-text-1);
} }
.row_1 { .button-head {
display: flex; display: flex;
gap: var(--size-4); gap: var(--size-4);
align-items: center; align-items: center;
color: var(--clr-scale-ntrl-10); color: var(--clr-scale-ntrl-10);
} }
.row_2 { .base-branch-label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--size-4); gap: var(--size-4);
color: var(--clr-scale-ntrl-40); color: var(--clr-scale-ntrl-40);
overflow: hidden;
& span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
} }
.small-count-badge { .small-count-badge {
position: absolute; position: absolute;