Fix public playlist request layout (#61)

Author: Jamesllllllllll

src/app.css

@@ -504,6 +504,16 @@ body.extension-mode #app {
     flex: 1 1 12rem;
   }
 
+  .dashboard-playlist__actions--public {
+    width: auto;
+    max-width: 100%;
+    justify-content: center;
+  }
+
+  .dashboard-playlist__actions--public > * {
+    flex: 0 0 auto;
+  }
+
   .dashboard-admin > section:nth-of-type(2) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -610,6 +620,14 @@ body.extension-mode #app {
     flex: 1 1 8rem;
   }
 
+  .dashboard-playlist__actions--public {
+    justify-content: center;
+  }
+
+  .dashboard-playlist__actions--public > * {
+    flex: 0 0 auto;
+  }
+
   .dashboard-playlist__versions-updated {
     display: none;
   }

src/components/playlist-management-surface.tsx

@@ -766,13 +766,13 @@ export function PlaylistManagementSurface(
 
       {props.embedCurrentPlaylist ? (
         <section className="grid gap-3">
-          <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="flex flex-wrap items-start justify-between gap-4 max-[960px]:px-4">
             {props.currentPlaylistTitle ? (
               <h2 className="text-2xl font-semibold text-(--text)">
                 {props.currentPlaylistTitle}
               </h2>
             ) : null}
-            <div className="dashboard-playlist__actions flex flex-wrap gap-3">
+            <div className="dashboard-playlist__actions dashboard-playlist__actions--public flex flex-wrap items-center gap-3">
               <Button
                 variant="outline"
                 onClick={() => mutation.mutate({ action: "shufflePlaylist" })}
@@ -1390,7 +1390,7 @@ function CurrentPlaylistRows(props: {
         ))}
       </AnimatePresence>
       {props.items.length === 0 ? (
-        <p className="text-sm leading-7 text-(--muted)">
+        <p className="px-4 text-sm leading-7 text-(--muted)">
           No songs in the playlist yet.
         </p>
       ) : null}

src/components/public-played-history-card.tsx

@@ -149,14 +149,14 @@ export function PublicPlayedHistoryCard(props: {
   });
 
   return (
-    <Card className="max-[960px]:rounded-none max-[960px]:border-x-0 max-[960px]:bg-transparent max-[960px]:shadow-none max-[960px]:[background-image:none]">
-      <CardHeader className="flex flex-row items-center justify-between gap-4 max-[960px]:px-0">
-        <div className="flex items-center gap-3">
+    <Card className="min-w-0 max-[960px]:rounded-none max-[960px]:border-x-0 max-[960px]:bg-transparent max-[960px]:shadow-none max-[960px]:[background-image:none]">
+      <CardHeader className="flex min-w-0 flex-wrap items-start justify-between gap-3 max-[960px]:px-4">
+        <div className="flex min-w-0 items-center gap-3">
           <div className="border border-(--border) bg-(--panel-soft) p-2 text-(--brand)">
             <History className="h-4 w-4" />
           </div>
-          <div>
-            <CardTitle>
+          <div className="min-w-0">
+            <CardTitle className="break-words">
               {props.channelDisplayName
                 ? `${props.channelDisplayName}'s played history`
                 : "Played history"}
@@ -165,6 +165,7 @@ export function PublicPlayedHistoryCard(props: {
         </div>
         <Button
           variant="outline"
+          className="shrink-0 max-[520px]:w-full"
           onClick={() => setHistoryOpen((current) => !current)}
         >
           {historyOpen ? (
@@ -181,7 +182,7 @@ export function PublicPlayedHistoryCard(props: {
         </Button>
       </CardHeader>
       {historyOpen ? (
-        <CardContent className="grid gap-4 max-[960px]:px-0">
+        <CardContent className="grid gap-4 max-[960px]:px-4">
           <div className="grid gap-4 lg:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)]">
             <div className="grid gap-2">
               <label