davidwindham.com / npmx.dev
forked from npmx.dev/npmx.dev
[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: adjust CSS for mobile (#481)

authored by

Wojciech Maj and committed by
GitHub 96fd9c86 881b349c

+6 -6
+1 -1
app/components/AppFooter.vue
··· 13 13 <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p> 14 14 <BuildEnvironment v-if="!isHome" footer /> 15 15 </div> 16 - <div class="flex items-center gap-3 sm:gap-6"> 16 + <div class="flex flex-wrap items-center gap-x-3 sm:gap-6"> 17 17 <NuxtLink 18 18 to="/about" 19 19 class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
+4 -4
app/components/AppHeader.vue
··· 32 32 <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border"> 33 33 <nav 34 34 :aria-label="$t('nav.main_navigation')" 35 - class="container h-14 flex items-center justify-start" 35 + class="container min-h-14 flex items-center justify-start" 36 36 > 37 37 <!-- Start: Logo --> 38 38 <div :class="{ 'hidden sm:block': showFullSearch }" class="flex-shrink-0"> ··· 85 85 <!-- End: User status + GitHub --> 86 86 <div 87 87 :class="{ 'hidden sm:flex': showFullSearch }" 88 - class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0" 88 + class="flex-1 flex flex-wrap items-center justify-end sm:gap-3 ms-auto sm:ms-0" 89 89 > 90 90 <NuxtLink 91 91 to="/about" 92 - class="sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded" 92 + class="px-2 py-1.5 sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded" 93 93 > 94 94 {{ $t('footer.about') }} 95 95 </NuxtLink> 96 96 97 97 <NuxtLink 98 98 to="/settings" 99 - class="link-subtle font-mono text-sm inline-flex items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded" 99 + class="link-subtle font-mono text-sm inline-flex items-center gap-2 px-2 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded" 100 100 aria-keyshortcuts="," 101 101 > 102 102 {{ $t('nav.settings') }}
+1 -1
app/components/SearchBox.vue
··· 105 105 name="q" 106 106 :placeholder="$t('search.placeholder')" 107 107 v-bind="noCorrect" 108 - class="w-full bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50" 108 + class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50" 109 109 @focus="handleSearchFocus" 110 110 @blur="handleSearchBlur" 111 111 />