Skip to content

fix(ui): invalid html button markup #1274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielroe merged 5 commits into from
Feb 9, 2026
Merged

fix(ui): invalid html button markup #1274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e7abc86
fix(ui): invalid html button markup
userquin Feb 9, 2026
425ef63
fix: set spans to block in account menu
danielroe Feb 9, 2026
bae6446
fix: add block to first line
danielroe Feb 9, 2026
9e601fa
chore: more block
danielroe Feb 9, 2026
931d9df
chore: another
danielroe Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions app/components/Compare/PackageSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,13 +178,13 @@ function handleBlur() {
:aria-label="$t('compare.no_dependency.add_column')"
@click="addPackage(NO_DEPENDENCY_ID)"
>
<div class="text-sm text-accent italic flex items-center gap-2">
<span class="text-sm text-accent italic flex items-center gap-2 block">
<span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
{{ $t('compare.no_dependency.typeahead_title') }}
</div>
<div class="text-xs text-fg-muted truncate mt-0.5">
</span>
<span class="text-xs text-fg-muted truncate mt-0.5">
{{ $t('compare.no_dependency.typeahead_description') }}
</div>
</span>
</ButtonBase>

<div v-if="isSearching" class="px-4 py-3 text-sm text-fg-muted">
Expand All @@ -196,10 +196,10 @@ function handleBlur() {
class="block w-full text-start"
@click="addPackage(result.name)"
>
<div class="font-mono text-sm text-fg">{{ result.name }}</div>
<div v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
<span class="font-mono text-sm text-fg block">{{ result.name }}</span>
<span v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
{{ result.description }}
</div>
</span>
</ButtonBase>
</div>
</Transition>
Expand Down
42 changes: 22 additions & 20 deletions app/components/Header/AccountMenu.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ function openAuthModal() {
class="border-none"
>
<!-- Stacked avatars when connected -->
<div
<span
v-if="hasAnyConnection"
class="flex items-center"
:class="hasBothConnections ? '-space-x-2' : ''"
Expand Down Expand Up @@ -103,7 +103,7 @@ function openAuthModal() {
>
<span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
</span>
</div>
</span>

<!-- "connect" text when not connected -->
<span v-if="!hasAnyConnection" class="font-mono text-sm">
Expand Down Expand Up @@ -163,10 +163,10 @@ function openAuthModal() {
>
<span class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
</span>
<div class="flex-1 min-w-0">
<div class="font-mono text-sm text-fg truncate">~{{ npmUser }}</div>
<div class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli') }}</div>
</div>
<span class="flex-1 min-w-0">
<span class="font-mono text-sm text-fg truncate block">~{{ npmUser }}</span>
<span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli') }}</span>
</span>
<span
v-if="operationCount > 0"
class="px-1.5 py-0.5 font-mono text-xs rounded"
Expand Down Expand Up @@ -206,10 +206,12 @@ function openAuthModal() {
>
<span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
</span>
<div class="flex-1 min-w-0">
<div class="font-mono text-sm text-fg truncate">@{{ atprotoUser.handle }}</div>
<div class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</div>
</div>
<span class="flex-1 min-w-0">
<span class="font-mono text-sm text-fg truncate block"
>@{{ atprotoUser.handle }}</span
>
<span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
</span>
</button>
</div>

Expand All @@ -236,16 +238,16 @@ function openAuthModal() {
/>
<span v-else class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
</span>
<div class="flex-1 min-w-0">
<div class="font-mono text-sm text-fg">
<span class="flex-1 min-w-0">
<span class="font-mono text-sm text-fg block">
{{
isNpmConnecting
? $t('account_menu.connecting')
: $t('account_menu.connect_npm_cli')
}}
</div>
<div class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</div>
</div>
</span>
<span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
</span>
</button>

<button
Expand All @@ -258,12 +260,12 @@ function openAuthModal() {
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
<span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
</span>
<div class="flex-1 min-w-0">
<div class="font-mono text-sm text-fg">
<span class="flex-1 min-w-0">
<span class="font-mono text-sm text-fg block">
{{ $t('account_menu.connect_atmosphere') }}
</div>
<div class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</div>
</div>
</span>
<span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>
</span>
</button>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/components/Package/DeprecatedTree.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,12 @@ function getDepthStyle(depth: DependencyDepth) {
aria-controls="deprecated-tree-details"
@click="isExpanded = !isExpanded"
>
<div class="flex items-center gap-2 min-w-0">
<span class="flex items-center gap-2 min-w-0 block">
<span class="i-carbon-warning-hex w-4 h-4 shrink-0" aria-hidden="true" />
<span class="font-mono text-sm font-medium truncate">
{{ $t('package.deprecated.tree_found', analysisData!.deprecatedPackages.length) }}
</span>
</div>
</span>
<span
class="i-carbon-chevron-down w-4 h-4 transition-transform duration-200 shrink-0"
:class="{ 'rotate-180': isExpanded }"
Expand Down
8 changes: 4 additions & 4 deletions app/components/Package/VulnerabilityTree.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function getDepthStyle(depth: string | undefined) {
aria-controls="vuln-tree-details"
@click="isExpanded = !isExpanded"
>
<div class="flex items-center gap-2 min-w-0">
<span class="flex items-center gap-2 min-w-0 block">
<span class="i-carbon:warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
<span class="font-mono text-sm font-medium truncate">
{{
Expand All @@ -98,15 +98,15 @@ function getDepthStyle(depth: string | undefined) {
)
}}
</span>
</div>
<div class="flex items-center gap-2 shrink-0">
</span>
<span class="flex items-center gap-2 shrink-0">
<span class="text-xs opacity-80 hidden sm:inline">{{ summaryText }}</span>
<span
class="i-carbon:chevron-down w-4 h-4 transition-transform duration-200"
:class="{ 'rotate-180': isExpanded }"
aria-hidden="true"
/>
</div>
</span>
</button>

<!-- Expandable details -->
Expand Down
Loading