Info modal + proto

web/src/App.tsx

@@ -94,7 +94,11 @@ export function App() {
         </div>
       </div>
 
-      <div class="flex-1 w-full max-w-md mx-auto px-4 pb-24 md:pb-6 pt-[env(safe-area-inset-top)]">
+      <div
+        class={`flex-1 w-full mx-auto px-4 pb-24 md:pb-6 pt-[env(safe-area-inset-top)] ${
+          category === "services" ? "max-w-5xl" : "max-w-md"
+        }`}
+      >
         {category === "links" && <LinkList links={content.links} />}
         {category === "monitor" && (
           <div class="flex flex-col gap-3 mt-4">
@@ -103,7 +107,7 @@ export function App() {
         )}
         {category === "exec" && content.exec.map((it) => <ScriptCard s={it} />)}
         {category === "services" && (
-          <div class="flex flex-col gap-3 mt-4">
+          <div class="grid gap-3 mt-4 md:grid-cols-2 lg:grid-cols-3">
             {content.services.map((s) => <ServiceCard s={s} refresh={refresh} />)}
           </div>
         )}