Improve how device metadata is displayed (#2371)

**Before:**

<img width="609" height="261" alt="Screenshot 2025-09-30 at 12 47 50 AM"
src="https://github.com/user-attachments/assets/bcae887c-863f-43f0-8689-4cb764d2f796"
/>

**After:**

<img width="607" height="311" alt="Screenshot 2025-09-30 at 12 49 43 AM"
src="https://github.com/user-attachments/assets/01290058-af3f-4a83-9dd8-64bfa6e1e771"
/>

Author: joshk

lib/nerves_hub_web/components/device_page/details_tab.ex

@@ -277,9 +277,9 @@ defmodule NervesHubWeb.Components.DevicePage.DetailsTab do
               </span>
             </div>
 
-            <div :if={!Enum.empty?(@metadata)} class="min-h-7 flex px-4 gap-4 items-center">
-              <span class="text-sm text-nerves-gray-500">Metadata:</span>
-              <span class="flex gap-1">
+            <div :if={!Enum.empty?(@metadata)} class="min-h-7 flex px-4 gap-4">
+              <span class="pt-1 text-sm text-nerves-gray-500">Metadata:</span>
+              <span class="flex flex-col gap-1">
                 <span :for={{key, value} <- Map.filter(@metadata, fn {_key, val} -> val != "" end)} class="text-sm text-zinc-300 px-2 py-1 border border-zinc-800 bg-zinc-800 rounded">
                   <span>{key |> String.replace("_", " ") |> String.capitalize()}: {value}</span>
                 </span>