vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-06-01 03:14:35 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(web): keep entry footer pills compact (#1045)

Browse source
This commit is contained in:
lefarcen 2026-05-09 18:08:47 +08:00 committed by GitHub
parent 21dcd74abb
commit ba44de4193
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 57 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
apps/web/src/components/EntryView.tsx
View file

@ -483,30 +483,43 @@ export function EntryView({
loading={skillsLoading || designSystemsLoading}
/>
<div className="entry-side-foot">
<button
type="button"
className={`foot-pill pet-pill${config.pet?.adopted ? '' : ' pet-pill-fresh'}`}
onClick={onAdoptPet}
title={
config.pet?.adopted
? t('pet.changePet')
: t('pet.adoptCallout')
}
>
<span className="pet-pill-glyph" aria-hidden>
{config.pet?.adopted
? config.pet.petId === 'custom'
? config.pet.custom.glyph || '🦄'
: '🐾'
: '🐾'}
</span>
<span>
{config.pet?.adopted
? t('pet.changePet')
: t('pet.adoptCallout')}
</span>
{!config.pet?.adopted ? <span className="pet-pill-dot" aria-hidden /> : null}
</button>
<div className="entry-side-foot-row">
<button
type="button"
className={`foot-pill pet-pill${config.pet?.adopted ? '' : ' pet-pill-fresh'}`}
onClick={onAdoptPet}
title={
config.pet?.adopted
? t('pet.changePet')
: t('pet.adoptCallout')
}
>
<span className="pet-pill-glyph" aria-hidden>
{config.pet?.adopted
? config.pet.petId === 'custom'
? config.pet.custom.glyph || '🦄'
: '🐾'
: '🐾'}
</span>
<span>
{config.pet?.adopted
? t('pet.changePet')
: t('pet.adoptCallout')}
</span>
{!config.pet?.adopted ? <span className="pet-pill-dot" aria-hidden /> : null}
</button>
<a
className="foot-pill foot-pill-follow"
href="https://x.com/nexudotio"
target="_blank"
rel="noreferrer noopener"
title="Follow @nexudotio on X for releases and milestones"
aria-label="Follow @nexudotio on X"
>
<Icon name="external-link" size={12} />
<span className="foot-pill-follow-label">Follow @nexudotio</span>
</a>
</div>
<button
type="button"
className="foot-pill"
@ -525,17 +538,6 @@ export function EntryView({
{envMetaLine}
</span>
</button>
<a
className="foot-pill"
href="https://x.com/nexudotio"
target="_blank"
rel="noreferrer noopener"
title="Follow @nexudotio on X for releases and milestones"
aria-label="Follow @nexudotio on X"
>
<Icon name="external-link" size={12} />
<span>Follow @nexudotio</span>
</a>
<LanguageMenu />
</div>
<button

20
apps/web/src/index.css
View file

@ -4615,8 +4615,15 @@ code {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding-top: 16px;
}
.entry-side-foot-row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.entry-side-foot .foot-pill {
display: inline-flex;
align-items: center;
@ -4631,6 +4638,19 @@ code {
cursor: pointer;
text-decoration: none;
}
.entry-side-foot-row .foot-pill {
min-width: 0;
}
.entry-side-foot-row .foot-pill-follow {
flex: 0 1 auto;
}
.entry-side-foot-row .foot-pill-follow-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.entry-side-foot .foot-pill:hover { background: var(--bg-panel); border-color: var(--border-strong); color: var(--text); }
.entry-side-foot .foot-pill .ico { font-size: 12px; opacity: 0.7; }