Skip to content

Commit 797e0b1

Browse files
jellydeckjellydeck
committed
fix: outline clipped
1 parent e9eb0ef commit 797e0b1

18 files changed

Lines changed: 45 additions & 37 deletions

‎app/assets/main.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,12 +215,17 @@ button {
215215
padding: 0;
216216
}
217217

218-
button:focus-visible {
218+
button:focus-visible,
219+
select:focus-visible {
219220
outline: 2px solid var(--accent);
220221
outline-offset: 2px;
221222
border-radius: 4px;
222223
}
223224

225+
input[type='text']:focus-visible {
226+
outline: 2px solid var(--accent);
227+
}
228+
224229
/* Selection */
225230
::selection {
226231
background-color: var(--fg-muted);

‎app/components/AppFooter.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ const isHome = computed(() => route.name === 'index')
1515
</div>
1616
<!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
1717
<div class="hidden sm:flex items-center gap-6">
18-
<NuxtLink to="/about" class="link-subtle font-mono text-xs min-h-11 flex items-center">
18+
<NuxtLink to="/about" class="link-subtle font-mono text-xs flex items-center">
1919
{{ $t('footer.about') }}
2020
</NuxtLink>
2121
<a
2222
href="https://docs.npmx.dev"
2323
target="_blank"
2424
rel="noopener noreferrer"
25-
class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
25+
class="link-subtle font-mono text-xs flex items-center gap-1"
2626
>
2727
{{ $t('footer.docs') }}
2828
<span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -31,7 +31,7 @@ const isHome = computed(() => route.name === 'index')
3131
href="https://repo.npmx.dev"
3232
target="_blank"
3333
rel="noopener noreferrer"
34-
class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
34+
class="link-subtle font-mono text-xs flex items-center gap-1"
3535
>
3636
{{ $t('footer.source') }}
3737
<span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -40,7 +40,7 @@ const isHome = computed(() => route.name === 'index')
4040
href="https://social.npmx.dev"
4141
target="_blank"
4242
rel="noopener noreferrer"
43-
class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
43+
class="link-subtle font-mono text-xs flex items-center gap-1"
4444
>
4545
{{ $t('footer.social') }}
4646
<span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -49,7 +49,7 @@ const isHome = computed(() => route.name === 'index')
4949
href="https://chat.npmx.dev"
5050
target="_blank"
5151
rel="noopener noreferrer"
52-
class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
52+
class="link-subtle font-mono text-xs flex items-center gap-1"
5353
>
5454
{{ $t('footer.chat') }}
5555
<span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />

‎app/components/AppHeader.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ onKeyStroke(
167167
<!-- Desktop: Compare link -->
168168
<NuxtLink
169169
to="/compare"
170-
class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 focus-visible:outline-accent/70 rounded"
170+
class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
171171
aria-keyshortcuts="c"
172172
>
173173
{{ $t('nav.compare') }}
@@ -182,7 +182,7 @@ onKeyStroke(
182182
<!-- Desktop: Settings link -->
183183
<NuxtLink
184184
to="/settings"
185-
class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 focus-visible:outline-accent/70 rounded"
185+
class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
186186
aria-keyshortcuts=","
187187
>
188188
{{ $t('nav.settings') }}

‎app/components/Header/AccountMenu.client.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ function openAuthModal() {
5959
<div ref="accountMenuRef" class="relative flex min-w-24 justify-end">
6060
<button
6161
type="button"
62-
class="relative flex items-center gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-accent/70"
62+
class="relative flex items-center gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-accent/70"
6363
:aria-expanded="isOpen"
6464
aria-haspopup="true"
6565
@click="isOpen = !isOpen"

‎app/components/Header/ConnectorModal.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ function handleDisconnect() {
167167
name="connector-token"
168168
:placeholder="$t('connector.modal.token_placeholder')"
169169
v-bind="noCorrect"
170-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
170+
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
171171
/>
172172
</div>
173173

@@ -191,7 +191,7 @@ function handleDisconnect() {
191191
name="connector-port"
192192
inputmode="numeric"
193193
autocomplete="off"
194-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
194+
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
195195
/>
196196
</div>
197197
</details>

‎app/components/Org/MembersPanel.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ watch(lastExecutionTime, () => {
324324
name="members-search"
325325
:placeholder="$t('org.members.filter_placeholder')"
326326
v-bind="noCorrect"
327-
class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
327+
class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover"
328328
/>
329329
</div>
330330
<div
@@ -352,7 +352,7 @@ watch(lastExecutionTime, () => {
352352
id="team-filter"
353353
v-model="filterTeam"
354354
name="team-filter"
355-
class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
355+
class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
356356
>
357357
<option :value="null">{{ $t('org.members.all_teams') }}</option>
358358
<option v-for="team in teamNames" :key="team" :value="team">
@@ -451,7 +451,7 @@ watch(lastExecutionTime, () => {
451451
:id="`role-${member.name}`"
452452
:value="member.role"
453453
:name="`role-${member.name}`"
454-
class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70 cursor-pointer"
454+
class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
455455
@change="
456456
handleChangeRole(
457457
member.name,
@@ -517,7 +517,7 @@ watch(lastExecutionTime, () => {
517517
id="new-member-role"
518518
v-model="newRole"
519519
name="new-member-role"
520-
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
520+
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
521521
>
522522
<option value="developer">{{ $t('org.members.role.developer') }}</option>
523523
<option value="admin">{{ $t('org.members.role.admin') }}</option>
@@ -529,7 +529,7 @@ watch(lastExecutionTime, () => {
529529
id="new-member-team"
530530
v-model="newTeam"
531531
name="new-member-team"
532-
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
532+
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
533533
>
534534
<option value="">{{ $t('org.members.no_team') }}</option>
535535
<option v-for="team in teamNames" :key="team" :value="team">

‎app/components/Package/AccessControls.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ watch(
250250
id="grant-team-select"
251251
v-model="selectedTeam"
252252
name="grant-team"
253-
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
253+
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
254254
:disabled="isLoadingTeams"
255255
>
256256
<option value="" disabled>
@@ -273,7 +273,7 @@ watch(
273273
id="grant-permission-select"
274274
v-model="permission"
275275
name="grant-permission"
276-
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
276+
class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
277277
>
278278
<option value="read-only">{{ $t('package.access.permission.read_only') }}</option>
279279
<option value="read-write">{{ $t('package.access.permission.read_write') }}</option>

‎app/components/Package/Dependencies.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const sortedOptionalDependencies = computed(() => {
7575
id="dependencies"
7676
:title="$t('package.dependencies.title', { count: sortedDependencies.length })"
7777
>
78-
<ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
78+
<ul class="space-y-1 list-none m-0 px-1" :aria-label="$t('package.dependencies.list_label')">
7979
<li
8080
v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
8181
:key="dep"
@@ -145,7 +145,7 @@ const sortedOptionalDependencies = computed(() => {
145145
<button
146146
v-if="sortedDependencies.length > 10 && !depsExpanded"
147147
type="button"
148-
class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
148+
class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
149149
@click="depsExpanded = true"
150150
>
151151
{{

‎app/components/Package/Keywords.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ defineProps<{
55
</script>
66
<template>
77
<CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
8-
<ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
8+
<ul class="flex flex-wrap gap-1.5 list-none m-0 p-1">
99
<li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
1010
<TagLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
1111
{{ keyword }}

‎app/components/Package/ListToolbar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ function getSortKeyLabelKey(key: SortKey): string {
160160
<select
161161
id="sort-select"
162162
:value="currentSort.key"
163-
class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
163+
class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover"
164164
@change="handleSortKeyChange"
165165
>
166166
<option

0 commit comments

Comments
 (0)