Skip to content

fix(ui): make all icons inline-block by default #652

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 3 commits into from
Feb 1, 2026
Merged

fix(ui): make all icons inline-block by default #652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6c38b6a
fix: ensure pagination icons render with correct dimensions
RYGRIT Feb 1, 2026
a36f951
fix: make all icons inline-block by default
danielroe Feb 1, 2026
331ad1d
Merge remote-tracking branch 'origin/main' into fix/pagination
danielroe Feb 1, 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
2 changes: 1 addition & 1 deletion app/components/CollapsibleSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ useHead({
>
{{ title }}
<span
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
aria-hidden="true"
/>
</a>
Expand Down
8 changes: 4 additions & 4 deletions app/components/Header/ConnectorModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,8 +119,8 @@ function handleDisconnect() {
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
@click="copy('pnpm npmx-connector')"
>
<span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
<span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
<span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
<span v-else class="i-carbon:checkmark w-5 h-5 text-green-500" aria-hidden="true" />
</button>
</div>

Expand All @@ -141,10 +141,10 @@ function handleDisconnect() {
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
@click="copyCommand"
>
<span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
<span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
<span
v-else
class="i-carbon:checkmark block w-5 h-5 text-green-500"
class="i-carbon:checkmark w-5 h-5 text-green-500"
aria-hidden="true"
/>
</button>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Header/MobileMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ onUnmounted(deactivate)
:aria-label="$t('common.close')"
@click="closeMenu"
>
<span class="i-carbon:close block w-5 h-5" aria-hidden="true" />
<span class="i-carbon:close w-5 h-5" aria-hidden="true" />
</button>
</div>

Expand Down
2 changes: 1 addition & 1 deletion app/components/LicenseDisplay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
</template>
<span
v-if="hasAnyValidLicense"
class="i-carbon-scales w-3.5 h-3.5 text-fg-subtle flex-shrink-0 inline-block self-center"
class="i-carbon-scales w-3.5 h-3.5 text-fg-subtle flex-shrink-0 self-center"
aria-hidden="true"
/>
</span>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Modal.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ defineExpose({
:aria-label="$t('common.close')"
@click="handleModalClose"
>
<span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
<span class="i-carbon-close w-5 h-5" aria-hidden="true" />
</button>
</div>
<!-- Modal body content -->
Expand Down
8 changes: 4 additions & 4 deletions app/components/Org/MembersPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ watch(lastExecutionTime, () => {
@click="refreshData"
>
<span
class="i-carbon:renew block w-4 h-4"
class="i-carbon:renew w-4 h-4"
:class="{ 'motion-safe:animate-spin': isLoading || isLoadingTeams }"
aria-hidden="true"
/>
Expand Down Expand Up @@ -391,7 +391,7 @@ watch(lastExecutionTime, () => {
<!-- Loading state -->
<div v-if="isLoading && memberList.length === 0" class="p-8 text-center">
<span
class="i-carbon:rotate-180 block w-5 h-5 text-fg-muted animate-spin mx-auto"
class="i-carbon:rotate-180 w-5 h-5 text-fg-muted animate-spin mx-auto"
aria-hidden="true"
/>
<p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.members.loading') }}</p>
Expand Down Expand Up @@ -470,7 +470,7 @@ watch(lastExecutionTime, () => {
:aria-label="$t('org.members.remove_from_org', { name: member.name })"
@click="handleRemoveMember(member.name)"
>
<span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
<span class="i-carbon:close w-4 h-4" aria-hidden="true" />
</button>
</div>
</div>
Expand Down Expand Up @@ -549,7 +549,7 @@ watch(lastExecutionTime, () => {
:aria-label="$t('org.members.cancel_add')"
@click="showAddMember = false"
>
<span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
<span class="i-carbon:close w-4 h-4" aria-hidden="true" />
</button>
</div>
</form>
Expand Down
12 changes: 6 additions & 6 deletions app/components/Org/OperationsQueue.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ watch(isExecuting, executing => {
:aria-label="$t('operations.queue.refresh')"
@click="refreshState"
>
<span class="i-carbon:renew block w-4 h-4" aria-hidden="true" />
<span class="i-carbon:renew w-4 h-4" aria-hidden="true" />
</button>
</div>
</div>
Expand Down Expand Up @@ -213,7 +213,7 @@ watch(isExecuting, executing => {
:aria-label="$t('operations.queue.approve_operation')"
@click="approveOperation(op.id)"
>
<span class="i-carbon:checkmark block w-4 h-4" aria-hidden="true" />
<span class="i-carbon:checkmark w-4 h-4" aria-hidden="true" />
</button>
<button
v-if="op.status !== 'running'"
Expand All @@ -222,7 +222,7 @@ watch(isExecuting, executing => {
:aria-label="$t('operations.queue.remove_operation')"
@click="removeOperation(op.id)"
>
<span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
<span class="i-carbon-close w-4 h-4" aria-hidden="true" />
</button>
</div>
</li>
Expand All @@ -235,7 +235,7 @@ watch(isExecuting, executing => {
role="alert"
>
<div class="flex items-center gap-2 mb-2">
<span class="i-carbon:locked block w-4 h-4 text-amber-400 shrink-0" aria-hidden="true" />
<span class="i-carbon:locked w-4 h-4 text-amber-400 shrink-0" aria-hidden="true" />
<span class="font-mono text-sm text-amber-400">
{{ $t('operations.queue.otp_prompt') }}
</span>
Expand Down Expand Up @@ -295,7 +295,7 @@ watch(isExecuting, executing => {
class="flex items-center gap-2 font-mono text-xs text-fg-muted cursor-pointer hover:text-fg transition-colors duration-200 select-none"
>
<span
class="i-carbon:chevron-right rtl-flip block w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
class="i-carbon:chevron-right rtl-flip w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
aria-hidden="true"
/>
{{ $t('operations.queue.log') }} ({{ completedOperations.length }})
Expand Down Expand Up @@ -331,7 +331,7 @@ watch(isExecuting, executing => {
:aria-label="$t('operations.queue.remove_from_log')"
@click="removeOperation(op.id)"
>
<span class="i-carbon:close block w-3 h-3" aria-hidden="true" />
<span class="i-carbon:close w-3 h-3" aria-hidden="true" />
</button>
</li>
</ul>
Expand Down
12 changes: 6 additions & 6 deletions app/components/Org/TeamsPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,7 @@ watch(lastExecutionTime, () => {
@click="loadTeams"
>
<span
class="i-carbon:renew block w-4 h-4"
class="i-carbon:renew w-4 h-4"
:class="{ 'animate-spin': isLoadingTeams }"
aria-hidden="true"
/>
Expand Down Expand Up @@ -328,7 +328,7 @@ watch(lastExecutionTime, () => {
<!-- Loading state -->
<div v-if="isLoadingTeams && teams.length === 0" class="p-8 text-center">
<span
class="i-carbon:rotate-180 block w-5 h-5 text-fg-muted motion-safe:animate-spin mx-auto"
class="i-carbon:rotate-180 w-5 h-5 text-fg-muted motion-safe:animate-spin mx-auto"
aria-hidden="true"
/>
<p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.teams.loading') }}</p>
Expand Down Expand Up @@ -398,7 +398,7 @@ watch(lastExecutionTime, () => {
:aria-label="$t('org.teams.delete_team', { name: teamName })"
@click.stop="handleDestroyTeam(teamName)"
>
<span class="i-carbon:trash-can block w-4 h-4" aria-hidden="true" />
<span class="i-carbon:trash-can w-4 h-4" aria-hidden="true" />
</button>
</div>

Expand Down Expand Up @@ -432,7 +432,7 @@ watch(lastExecutionTime, () => {
:aria-label="$t('org.teams.remove_user', { user })"
@click="handleRemoveUser(teamName, user)"
>
<span class="i-carbon:close block w-3.5 h-3.5" aria-hidden="true" />
<span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
</button>
</li>
</ul>
Expand Down Expand Up @@ -468,7 +468,7 @@ watch(lastExecutionTime, () => {
:aria-label="$t('org.teams.cancel_add_user')"
@click="showAddUserFor = null"
>
<span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
<span class="i-carbon:close w-4 h-4" aria-hidden="true" />
</button>
</form>
</div>
Expand Down Expand Up @@ -525,7 +525,7 @@ watch(lastExecutionTime, () => {
:aria-label="$t('org.teams.cancel_create')"
@click="showCreateTeam = false"
>
<span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
<span class="i-carbon:close w-4 h-4" aria-hidden="true" />
</button>
</form>
</div>
Expand Down
8 changes: 4 additions & 4 deletions app/components/Package/AccessControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ watch(
@click="loadCollaborators"
>
<span
class="i-carbon-renew block w-3.5 h-3.5"
class="i-carbon-renew w-3.5 h-3.5"
:class="{ 'motion-safe:animate-spin': isLoadingCollaborators }"
aria-hidden="true"
/>
Expand All @@ -173,7 +173,7 @@ watch(
<!-- Loading state -->
<div v-if="isLoadingCollaborators && collaboratorList.length === 0" class="py-4 text-center">
<span
class="i-carbon-rotate-180 block w-4 h-4 text-fg-muted animate-spin mx-auto"
class="i-carbon-rotate-180 w-4 h-4 text-fg-muted animate-spin mx-auto"
aria-hidden="true"
/>
</div>
Expand Down Expand Up @@ -229,7 +229,7 @@ watch(
:aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
@click="handleRevokeAccess(collab.name)"
>
<span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
<span class="i-carbon-close w-3.5 h-3.5" aria-hidden="true" />
</button>
<span v-else class="text-xs text-fg-subtle"> {{ $t('package.access.owner') }} </span>
</li>
Expand Down Expand Up @@ -291,7 +291,7 @@ watch(
:aria-label="$t('package.access.cancel_grant')"
@click="showGrantAccess = false"
>
<span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
<span class="i-carbon-close w-4 h-4" aria-hidden="true" />
</button>
</div>
</form>
Expand Down
4 changes: 2 additions & 2 deletions app/components/Package/Card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const pkgDescription = useMarkdown(() => ({
<div class="flex items-center gap-1.5">
<dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
<dd class="flex items-center gap-1.5">
<span class="i-carbon:chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
<span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
<span class="font-mono">{{ $n(result.downloads.weekly) }}/w</span>
</dd>
</div>
Expand Down Expand Up @@ -152,7 +152,7 @@ const pkgDescription = useMarkdown(() => ({
v-if="result.downloads?.weekly"
class="text-fg-subtle gap-2 flex items-center justify-end"
>
<span class="i-carbon:chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
<span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
<span class="font-mono text-xs">
{{ $n(result.downloads.weekly) }} {{ $t('common.per_week') }}
</span>
Expand Down
6 changes: 3 additions & 3 deletions app/components/Package/Dependencies.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const sortedOptionalDependencies = computed(() => {
:title="getOutdatedTooltip(outdatedDeps[dep], $t)"
aria-hidden="true"
>
<span class="i-carbon:warning-alt w-3 h-3 block" />
<span class="i-carbon:warning-alt w-3 h-3" />
</span>
<NuxtLink
v-if="getVulnerableDepInfo(dep)"
Expand All @@ -107,7 +107,7 @@ const sortedOptionalDependencies = computed(() => {
:class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
:title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
>
<span class="i-carbon:security w-3 h-3 block" aria-hidden="true" />
<span class="i-carbon:security w-3 h-3" aria-hidden="true" />
<span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
</NuxtLink>
<NuxtLink
Expand All @@ -119,7 +119,7 @@ const sortedOptionalDependencies = computed(() => {
class="shrink-0 text-purple-500"
:title="getDeprecatedDepInfo(dep)!.message"
>
<span class="i-carbon-warning-hex w-3 h-3 block" aria-hidden="true" />
<span class="i-carbon-warning-hex w-3 h-3" aria-hidden="true" />
<span class="sr-only">{{ $t('package.deprecated.label') }}</span>
</NuxtLink>
<NuxtLink
Expand Down
2 changes: 1 addition & 1 deletion app/components/Package/DownloadAnalytics.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -699,7 +699,7 @@ const config = computed(() => {
}
"
>
<span class="i-carbon:reset w-5 h-5 inline-block" aria-hidden="true" />
<span class="i-carbon:reset w-5 h-5" aria-hidden="true" />
</button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Package/InstallScripts.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const isExpanded = shallowRef(false)
:title="getOutdatedTooltip(outdatedNpxDeps[dep], $t)"
aria-hidden="true"
>
<span class="i-carbon:warning-alt w-3 h-3 block" />
<span class="i-carbon:warning-alt w-3 h-3" />
</span>
<span
class="font-mono text-xs text-end truncate"
Expand Down
2 changes: 1 addition & 1 deletion app/components/Package/ListControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const showFilteredCount = computed(() => {
class="absolute h-full w-10 flex items-center justify-center text-fg-subtle pointer-events-none"
aria-hidden="true"
>
<div class="i-carbon:search inline-block w-4 h-4" />
<div class="i-carbon:search w-4 h-4" />
</div>
<input
id="package-filter"
Expand Down
6 changes: 3 additions & 3 deletions app/components/Package/Maintainers.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ watch(
>
{{ $t('package.maintainers.title') }}
<span
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
class="i-carbon-link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
aria-hidden="true"
/>
</a>
Expand Down Expand Up @@ -230,7 +230,7 @@ watch(
"
@click="handleRemoveOwner(maintainer.name)"
>
<span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
<span class="i-carbon-close w-3.5 h-3.5" aria-hidden="true" />
</button>
</li>
</ul>
Expand Down Expand Up @@ -280,7 +280,7 @@ watch(
:aria-label="$t('package.maintainers.cancel_add')"
@click="showAddOwner = false"
>
<span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
<span class="i-carbon-close w-4 h-4" aria-hidden="true" />
</button>
</form>
</div>
Expand Down
8 changes: 4 additions & 4 deletions app/components/Package/SkillsModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
<!-- File counts & warnings -->
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
<span v-if="skill.fileCounts?.scripts" class="text-fg-subtle">
<span class="i-carbon:script size-3 inline-block align-[-2px] me-0.5" />{{
<span class="i-carbon:script size-3 align-[-2px] me-0.5" />{{
$t(
'package.skills.file_counts.scripts',
{ count: skill.fileCounts.scripts },
Expand All @@ -193,7 +193,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
}}
</span>
<span v-if="skill.fileCounts?.references" class="text-fg-subtle">
<span class="i-carbon:document size-3 inline-block align-[-2px] me-0.5" />{{
<span class="i-carbon:document size-3 align-[-2px] me-0.5" />{{
$t(
'package.skills.file_counts.refs',
{ count: skill.fileCounts.references },
Expand All @@ -202,7 +202,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
}}
</span>
<span v-if="skill.fileCounts?.assets" class="text-fg-subtle">
<span class="i-carbon:image size-3 inline-block align-[-2px] me-0.5" />{{
<span class="i-carbon:image size-3 align-[-2px] me-0.5" />{{
$t(
'package.skills.file_counts.assets',
{ count: skill.fileCounts.assets },
Expand All @@ -212,7 +212,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
</span>
<template v-for="warning in skill.warnings" :key="warning.message">
<span class="text-amber-500">
<span class="i-carbon:warning size-3 inline-block align-[-2px] me-0.5" />{{
<span class="i-carbon:warning size-3 align-[-2px] me-0.5" />{{
warning.message
}}
</span>
Expand Down
5 changes: 1 addition & 4 deletions app/components/Terminal/Install.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,10 +153,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
:title="$t('package.get_started.view_types', { package: typesPackageName })"
>
<span
class="i-carbon:arrow-right rtl-flip w-3 h-3 inline-block align-middle"
aria-hidden="true"
/>
<span class="i-carbon:arrow-right rtl-flip w-3 h-3 align-middle" aria-hidden="true" />
<span class="sr-only">View {{ typesPackageName }}</span>
</NuxtLink>
</div>
Expand Down
5 changes: 1 addition & 4 deletions app/components/UserCombobox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,10 +204,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
role="status"
aria-live="polite"
>
<span
class="i-carbon:information w-3 h-3 inline-block me-1 align-middle"
aria-hidden="true"
/>
<span class="i-carbon:information w-3 h-3 me-1 align-middle" aria-hidden="true" />
{{
$t('user.combobox.press_enter_to_add', {
username: inputValue.trim().replace(/^@/, ''),
Expand Down
Loading
Loading