v3: fixed search in prod, lots of UI fixes across the app

src/components/AppHeader.tsx

@@ -29,8 +29,8 @@ export function AppHeader(
         className={`app-header${centerSlot ? " app-header--has-center" : ""}`}
       >
         <Link to="/?tab=hot" className="app-header-brand">
-          🚚 {document.querySelector<HTMLMetaElement>('meta[name="site-name"]')
-            ?.content ?? "gerbeur"}
+          🚚<span className="app-header-brand-name">{" "}{document.querySelector<HTMLMetaElement>('meta[name="site-name"]')
+            ?.content ?? "gerbeur"}</span>
         </Link>
 
         {centerSlot && <div className="app-header-center">{centerSlot}</div>}
@@ -68,7 +68,7 @@ export function AppHeader(
                   disabled={disableNew}
                   title={disableNew ? t`Server unreachable` : undefined}
                 >
-                  <Trans>+ New</Trans>
+                  +<span className="btn-new-label"><Trans> Dump</Trans></span>
                 </button>
               </>
             )

src/components/DumpCard.tsx

@@ -40,15 +40,28 @@ export function DumpCard(
         className="dump-card-inner"
         onClick={handleNavigate}
       >
-        <div
-          className="dump-card-preview"
-          onClick={dump.richContent ? (e) => e.stopPropagation() : undefined}
-        >
-          {dump.kind === "file"
-            ? <FilePreview dump={dump} compact />
-            : dump.richContent
-            ? <RichContentCard richContent={dump.richContent} compact />
-            : <span className="dump-card-preview-icon">🔗</span>}
+        <div className="dump-card-left">
+          <div
+            className="dump-card-preview"
+            onClick={dump.richContent ? (e) => e.stopPropagation() : undefined}
+          >
+            {dump.kind === "file"
+              ? <FilePreview dump={dump} compact />
+              : dump.richContent
+              ? <RichContentCard richContent={dump.richContent} compact />
+              : <span className="dump-card-preview-icon">🔗</span>}
+          </div>
+
+          <div className="dump-card-vote" onClick={(e) => e.stopPropagation()}>
+            <VoteButton
+              dumpId={dump.id}
+              count={voteCount}
+              voted={voted}
+              disabled={!canVote}
+              onCast={castVote}
+              onRemove={removeVote}
+            />
+          </div>
         </div>
 
         <div className="dump-card-body">
@@ -94,16 +107,6 @@ export function DumpCard(
           </div>
         </div>
 
-        <div className="dump-card-vote" onClick={(e) => e.stopPropagation()}>
-          <VoteButton
-            dumpId={dump.id}
-            count={voteCount}
-            voted={voted}
-            disabled={!canVote}
-            onCast={castVote}
-            onRemove={removeVote}
-          />
-        </div>
       </div>
     </li>
   );

src/components/DumpCreateModal.tsx

@@ -373,14 +373,14 @@ export function DumpCreateModal(
 
               <div className="form-group">
                 <label htmlFor="dc-comment">
-                  <Trans>Why are you dumping this?</Trans>
+                  <Trans>Why?</Trans>
                 </label>
                 <TextEditor
                   id="dc-comment"
                   value={comment}
                   onChange={setComment}
                   disabled={submitting}
-                  placeholder={t`Tell the community what makes this worth their time...`}
+                  placeholder={t`What makes it worth it?`}
                   rows={3}
                   maxLength={VALIDATION.DUMP_COMMENT_MAX}
                 />

src/components/FeedTabBar.tsx

@@ -16,6 +16,7 @@ export function FeedTabBar() {
   }
 
   return (
+    <div className="feed-sort-scroller">
     <div className="feed-sort">
       <button
         type="button"
@@ -48,5 +49,6 @@ export function FeedTabBar() {
         </button>
       )}
     </div>
+    </div>
   );
 }

src/components/NewPlaylistForm.tsx

@@ -27,7 +27,7 @@ export function NewPlaylistForm(
         className={toggleClassName}
         onClick={() => setOpen(true)}
       >
-        {toggleLabel ?? <Trans>+ New playlist</Trans>}
+        {toggleLabel ?? <>+<span className="btn-new-label"><Trans> New playlist</Trans></span></>}
       </button>
 
       {open && (