Merge pull request 'minor-fixes' (#134) from minor-fixes into main

Reviewed-on: #134

src/element/emoji-pack.tsx

@@ -42,7 +42,7 @@ export function EmojiPack({ ev }: { ev: NostrEvent }) {
   }
 
   return (
-    <div className="outline emoji-pack">
+    <div className="emoji-pack">
       <div className="emoji-pack-title">
         <h4>{name}</h4>
         {login?.pubkey &&

src/element/event-reactions.tsx

@@ -18,7 +18,7 @@ export default function EventReactions({ ev }: { ev: TaggedNostrEvent }) {
   const totalZaps = grouped.zaps.reduce((acc, v) => acc + v.amount, 0);
   const iconClass = "flex gap-2 items-center tabular-nums cursor-pointer select-none hover:text-primary transition";
   return (
-    <div className="flex gap-4 items-center">
+    <div className="flex flex-wrap gap-4 mt-2 items-center">
       <ZapEvent ev={ev}>
         <div className={iconClass}>
           <Icon name="zap-filled" />

src/element/live-chat.tsx

@@ -77,7 +77,7 @@ export function LiveChat({
         rb.withFilter().kinds([LIVE_STREAM_CHAT, LIVE_STREAM_RAID, LIVE_STREAM_CLIP]).tag("a", [aTag]).limit(200);
       }
     },
-    true
+    true,
   );
   const login = useLogin();
   const started = useMemo(() => {

src/element/video-grid-sorted.tsx

@@ -15,7 +15,7 @@ export default function VideoGridSorted({ evs, showAll }: { evs: Array<TaggedNos
     (ev: NostrEvent) => {
       return tags.find(t => t.at(1) === getHost(ev));
     },
-    [tags]
+    [tags],
   );
   const { live, planned, ended } = useSortedStreams(evs, showAll ? 0 : undefined);
   const hashtags = getTagValues(tags, "t");
@@ -73,10 +73,10 @@ export default function VideoGridSorted({ evs, showAll }: { evs: Array<TaggedNos
 function GridSection({ header, items }: { header: ReactNode; items: Array<TaggedNostrEvent> }) {
   return (
     <>
-      <h2 className="flex items-center gap-4">
-        {header}
+      <div className="flex items-center gap-4">
+        <h2 className="whitespace-nowrap">{header}</h2>
         <span className="h-[1px] bg-layer-1 w-full" />
-      </h2>
+      </div>
       <VideoGrid>
         {items.map(e => (
           <VideoTile ev={e} key={e.id} />

src/element/video-grid.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 
 export default function VideoGrid({ children }: { children: ReactNode }) {
   return (
-    <div className="grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7 3xl:grid-cols-8">
+    <div className="grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7 3xl:grid-cols-8 items-start">
       {children}
     </div>
   );

src/hooks/lang.ts

@@ -19,7 +19,7 @@ const LangSelector = new LangStore();
 export function useLang() {
   const store = useSyncExternalStore(
     c => LangSelector.hook(c),
-    () => LangSelector.snapshot()
+    () => LangSelector.snapshot(),
   );
 
   return {

src/pages/category.tsx

@@ -85,7 +85,7 @@ export default function Category() {
   const results = useRequestBuilder(sub);
   return (
     <div>
-      <div className="flex gap-4">
+      <div className="flex flex-wrap gap-4">
         {AllCategories.map(a => (
           <CategoryLink key={a.id} {...a} />
         ))}

src/pages/layout.tsx

@@ -25,6 +25,7 @@ export function LayoutPage() {
   const login = useLogin();
   const [showLogin, setShowLogin] = useState(false);
   const { lang, setLang } = useLang();
+  const country = lang.split(/[-_]/i)[1]?.toLowerCase();
 
   useLoginEvents(login?.pubkey, true);
 
@@ -38,7 +39,7 @@ export function LayoutPage() {
         menuClassName="ctx-menu"
         menuButton={
           <div className="flex gap-2 items-center">
-            <div className={`fi fi-${lang.split(/[-_]/i)[1]?.toLowerCase()}`}></div>
+            {country && <div className={`fi fi-${country}`}></div>}
             <div className="uppercase pointer">
               <b>{lang.includes("-") ? lang.split("-")[0] : lang}</b>
             </div>
@@ -47,7 +48,7 @@ export function LayoutPage() {
         align="end"
         gap={5}>
         {AllLocales.sort().map(l => (
-          <MenuItem onClick={() => setLang(l)} key={l}>
+          <MenuItem className="capitalize" onClick={() => setLang(l)} key={l}>
             {new Intl.DisplayNames([l], {
               type: "language",
             }).of(l)}

src/pages/stream-page.tsx

@@ -71,9 +71,11 @@ function StreamInfo({ ev, goal }: { ev?: TaggedNostrEvent; goal?: TaggedNostrEve
                 <StreamTimer ev={ev} />
               </Pill>
             )}
-            <Pill>
-              <GameInfoCard gameId={gameId} gameInfo={gameInfo} showImage={false} link={true} />
-            </Pill>
+            {gameId && gameInfo && (
+              <Pill>
+                <GameInfoCard gameId={gameId} gameInfo={gameInfo} showImage={false} link={true} />
+              </Pill>
+            )}
             {ev && <Tags ev={ev} />}
           </div>
           {isMine && (