@@ -18,8 +18,8 @@

1818</head>19192020<body class="min-h-dvh flex flex-col px-4">21-<header class="w-full max-w-6xl mx-auto py-4 mb-4 text-lg flex justify-between items-center border-b">22-<h2 class="flex items-center gap-2">21

+<header class="w-full max-w-6xl mx-auto py-4 mb-4 text-lg flex justify-between items-center flex-wrap gap-y-2 border-b">

22+<h2 class="flex items-center gap-2 whitespace-nowrap">2323<%= link_to root_path, class: "group" do %>2424<%= image_tag "/icon.svg", class: "inline-block" %>2525<code class="">

@@ -30,7 +30,7 @@

3030<% end %>3131</h2>323233-<div class="inline-flex items-center gap-2">33+<div class="ml-auto inline-flex items-center gap-2">3434<% if Current.user.present? %>3535<%= link_to user_path(Current.user), class: "group flex items-center gap-2" do %>3636<%= image_tag user_avatar_url(Current.user, size: 32), class: 'w-8 h-8 rounded-full' %>

@@ -50,26 +50,26 @@

5050<%= yield %>5151</main>525253-<footer class="w-full max-w-6xl mx-auto py-4 mt-24 text-base flex justify-between items-center border-t">54

-<p>Made by <a href="https://twitter.com/fractaledmind" class="text-blue-500 hover:underline decoration-blue-500">@fractaledmind</a> and <a href="https://github.com/fractaledmind/sqlite.directory/graphs/contributors" class="text-blue-500 hover:underline decoration-blue-500">friends</a>! Want to help? It's <a href="https://github.com/fractaledmind/sqlite.directory" class="text-blue-500 hover:underline decoration-blue-500">open source</a>!</p>

53

+<footer class="w-full max-w-6xl mx-auto py-4 mt-24 text-base flex justify-between items-center flex-wrap-reverse gap-y-2 border-t">

54

+<p class="text-balance">Made by <a href="https://twitter.com/fractaledmind" class="text-blue-500 hover:underline decoration-blue-500">@fractaledmind</a> and <a href="https://github.com/fractaledmind/sqlite.directory/graphs/contributors" class="text-blue-500 hover:underline decoration-blue-500">friends</a>! Want to help? It's <a href="https://github.com/fractaledmind/sqlite.directory" class="text-blue-500 hover:underline decoration-blue-500">open source</a>!</p>

55555656<% if Current.session %>57

-<%= button_to "Sign out", Current.session, method: :delete, class: "rounded bg-transparent text-red-500 border border-red-500 py-0 px-2 hover:bg-red-500 hover:text-white" %>

57

+<%= button_to "Sign out", Current.session, method: :delete, class: "whitespace-nowrap rounded bg-transparent text-red-500 border border-red-500 py-0 px-2 hover:bg-red-500 hover:text-white" %>

5858<% end %>5959</footer>606061-<div class="fixed -z-10 top-2 left-0 right-0 text-center py-2">61+<div class="fixed z-10 top-1 left-0 right-0 text-center py-2">6262<% if notice.present? %>6363<p id="notice"64-class="py-2 px-3 bg-green-50 text-green-500 font-medium rounded-lg inline-block"64+class="py-2 px-3 bg-green-50 text-green-500 border border-green-200 font-medium rounded-lg inline-block"6565data-controller="fade">6666<%= notice %>6767</p>6868<% end %>69697070<% if alert.present? %>7171<p id="alert"72-class="py-2 px-3 bg-red-50 text-red-500 font-medium rounded-lg inline-block"72+class="py-2 px-3 bg-red-50 text-red-500 border border-red-200 font-medium rounded-lg inline-block"7373data-controller="fade">7474<%= alert %>7575</p>