feat: mobile and tablet styles

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-hook/resize-observer": "^1.2.6",
     "@snort/system-react": "^1.0.8",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",

src/element/emoji.css

@@ -2,5 +2,4 @@
   width: 21px;
   height: 21px;
   display: inline-block;
-  margin-bottom: -5px;
 }

src/element/live-chat.css

@@ -1,13 +1,23 @@
 .live-chat {
-  height: calc(100vh - 72px - 96px);
+  grid-area: chat;
   display: flex;
   flex-direction: column;
-  padding: 24px 16px 8px 24px;
+  padding: 8px 16px;
-  border: 1px solid #171717;
+  border: none;
-  border-radius: 24px;
+  height: unset;
-  gap: 16px;
 }
 
+@media (min-width: 1020px)  {
+  .live-chat {
+    height: calc(100vh - 72px - 96px);
+    padding: 24px 16px 8px 24px;
+    border: 1px solid #171717;
+    border-radius: 24px;
+    gap: 16px;
+  }
+}
+
+
 .live-chat>.header {
   font-weight: 600;
   font-size: 24px;
@@ -15,12 +25,19 @@
 }
 
 .live-chat>.messages {
-  flex-grow: 1;
   display: flex;
   gap: 12px;
   flex-direction: column-reverse;
   overflow-y: auto;
   overflow-x: hidden;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border, #171717);
+}
+
+@media (min-width: 1020px){
+  .live-chat > .messages {
+    flex-grow: 1;
+  }
 }
 
 .live-chat>.write-message {
@@ -42,6 +59,10 @@
   flex-grow: 1;
 }
 
+.live-chat .message {
+  word-wrap: break-word;
+}
+
 .live-chat .message .profile {
   gap: 8px;
   font-weight: 600;
@@ -69,6 +90,10 @@
   color: white;
 }
 
+.live-chat .messages .pill:hover {
+  cursor: default;
+}
+
 .live-chat .zap {
   display: flex;
   align-items: center;
@@ -84,14 +109,21 @@
 
 .top-zappers-container {
   display: flex;
-  gap: 8px;
+  padding-top: 8px;
-  justify-content: space-between;
+  padding-bottom: 8px;
-  padding-top: 12px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--border, #171717);
   overflow-y: scroll;
 }
 
+@media (min-width: 1020px) {
+  .top-zappers-container {
+    display: flex;
+    gap: 8px;
+    padding-top: 12px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid var(--border, #171717);
+  }
+}
+
 .top-zapper {
   display: flex;
   padding: 4px 8px 4px 4px;
@@ -114,6 +146,6 @@
   margin: 0;
 }
 
-.top-zapper-icon {
+.zap-icon {
   color: #FFCB44;
 }

src/element/live-chat.tsx

@@ -42,7 +42,8 @@ function totalZapped(pubkey: string, zaps: ParsedZap[]) {
 function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
   const zappers = zaps
     .map((z) => (z.anonZap ? "anon" : z.sender))
-    .map((p) => p as string);
+    .map((p) => p as string)
+    .slice(0, 3);
 
   const sortedZappers = useMemo(() => {
     const sorted = [...new Set([...zappers])];
@@ -63,7 +64,7 @@ function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
               ) : (
                 <Profile pubkey={pk} options={{ showName: false }} />
               )}
-              <Icon name="zap" className="top-zapper-icon" />
+              <Icon name="zap" className="zap-icon" />
               <p className="top-zapper-amount">{formatSats(total)}</p>
             </div>
           );
@@ -76,9 +77,11 @@ function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
 export function LiveChat({
   link,
   options,
+  height,
 }: {
   link: NostrLink;
   options?: LiveChatOptions;
+  height?: number;
 }) {
   const messages = useLiveChatFeed(link);
   const login = useLogin();
@@ -88,7 +91,7 @@ export function LiveChat({
     .map((ev) => parseZap(ev, System.ProfileLoader.Cache))
     .filter((z) => z && z.valid);
   return (
-    <div className="live-chat">
+    <div className="live-chat" style={height ? { height: `${height}px` } : {}}>
       {(options?.showHeader ?? true) && (
         <div className="header">Stream Chat</div>
       )}
@@ -157,7 +160,7 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
   return (
     <div className="pill">
       <div className="zap">
-        <Icon name="zap" />
+        <Icon name="zap" className="zap-icon" />
         <Profile
           pubkey={parsed.anonZap ? "" : parsed.sender ?? ""}
           options={{
@@ -165,7 +168,6 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
             overrideName: parsed.anonZap ? "Anon" : undefined,
           }}
         />
-        zapped &nbsp;
         {formatSats(parsed.amount)}
         &nbsp; sats
       </div>

src/element/live-video-player.tsx

@@ -3,16 +3,23 @@ import { HTMLProps, useEffect, useMemo, useRef, useState } from "react";
 
 export enum VideoStatus {
   Online = "online",
-  Offline = "offline"
+  Offline = "offline",
 }
 
-export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?: string }) {
+export function LiveVideoPlayer(
+  props: HTMLProps<HTMLVideoElement> & { stream?: string }
+) {
   const video = useRef<HTMLVideoElement>(null);
   const streamCached = useMemo(() => props.stream, [props.stream]);
   const [status, setStatus] = useState<VideoStatus>();
 
   useEffect(() => {
-    if (streamCached && video.current && !video.current.src && Hls.isSupported()) {
+    if (
+      streamCached &&
+      video.current &&
+      !video.current.src &&
+      Hls.isSupported()
+    ) {
       try {
         const hls = new Hls();
         hls.loadSource(streamCached);
@@ -25,10 +32,10 @@ export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?:
             hls.detachMedia();
             setStatus(VideoStatus.Offline);
           }
-        })
+        });
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
           setStatus(VideoStatus.Online);
-        })
+        });
         return () => hls.destroy();
       } catch (e) {
         console.error(e);
@@ -37,9 +44,11 @@ export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?:
     }
   }, [video, streamCached]);
   return (
-    <div className={status}>
+    <>
-      <div>{status}</div>
+      <div className={status}>
+        <div>{status}</div>
+      </div>
       <video ref={video} {...props} controls={status === VideoStatus.Online} />
-    </div>
+    </>
   );
 }

src/element/profile.tsx

@@ -24,16 +24,24 @@ export function getName(pk: string, user?: UserMetadata) {
 
 export function Profile({
   pubkey,
+  avatarClassname,
   options,
 }: {
   pubkey: string;
+  avatarClassname?: string;
   options?: ProfileOptions;
 }) {
   const profile = useUserProfile(System, pubkey);
 
   return (
     <div className="profile">
-      {(options?.showAvatar ?? true) && <img src={profile?.picture ?? ""} />}
+      {(options?.showAvatar ?? true) && (
+        <img
+          alt={profile?.name || pubkey}
+          className={avatarClassname ? avatarClassname : ""}
+          src={profile?.picture ?? ""}
+        />
+      )}
       {(options?.showName ?? true) &&
         (options?.overrideName ?? getName(pubkey, profile))}
     </div>

src/element/textarea.css

@@ -1,3 +1,7 @@
+.rta__textarea {
+  resize: none;
+}
+
 .rta__list {
   border: none;
 }

src/hooks/event-feed.ts

@@ -1,5 +1,10 @@
 import { useMemo } from "react";
-import { NostrPrefix, RequestBuilder, ReplaceableNoteStore, NostrLink } from "@snort/system";
+import {
+  NostrPrefix,
+  RequestBuilder,
+  ReplaceableNoteStore,
+  NostrLink,
+} from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
 
 import { System } from "index";
@@ -8,8 +13,8 @@ export default function useEventFeed(link: NostrLink, leaveOpen = false) {
   const sub = useMemo(() => {
     const b = new RequestBuilder(`event:${link.id.slice(0, 12)}`);
     b.withOptions({
-      leaveOpen
+      leaveOpen,
-    })
+    });
     if (link.type === NostrPrefix.Address) {
       const f = b.withFilter().tag("d", [link.id]);
       if (link.author) {
@@ -21,14 +26,18 @@ export default function useEventFeed(link: NostrLink, leaveOpen = false) {
     } else {
       const f = b.withFilter().ids([link.id]);
       if (link.relays) {
-        link.relays.slice(0, 2).forEach(r => f.relay(r));
+        link.relays.slice(0, 2).forEach((r) => f.relay(r));
       }
       if (link.author) {
         f.authors([link.author]);
       }
     }
     return b;
-  }, [link]);
+  }, [link, leaveOpen]);
 
-  return useRequestBuilder<ReplaceableNoteStore>(System, ReplaceableNoteStore, sub);
+  return useRequestBuilder<ReplaceableNoteStore>(
+    System,
+    ReplaceableNoteStore,
+    sub
+  );
 }

src/pages/layout.css

@@ -1,4 +1,74 @@
+.page {
+  display: grid;
+  grid-template-areas:
+    "header"
+    "video-content"
+    "profile"
+    "chat";
+  grid-template-rows: 64px 230px 56px min-content;
+  grid-template-columns: 1fr;
+  height: 100vh;
+  gap: 0;
+}
+
+
+.live-chat {
+  max-height: calc(100vh - 385px);
+}
+
+@media (min-width: 768px) {
+  .info {
+    display: none;
+  }
+
+  .video-content video {
+    height: calc(100vh - 64px);
+  }
+
+  .live-chat {
+    width: fit-content;
+    max-height: calc(100vh - 82px);
+  }
+
+  .page {
+    display: grid;
+    grid-template-areas:
+      "header header"
+      "video-content chat";
+    grid-template-rows: 64px min-content;
+    grid-template-columns: calc(min(600px, 1fr)) 1fr;
+    gap: 0;
+  }
+}
+
+@media (min-width: 1020px) {
+  .video-content video {
+    height: unset;
+  }
+
+  .page {
+    width: unset;
+    display: grid;
+    height: calc(100vh - 72px - 32px - 32px);
+    padding: 0 40px;
+    grid-template-columns: auto 376px;
+    grid-template-rows: unset;
+    grid-template-areas:
+      "header header"
+      "video-content chat"
+      "profile chat";
+    gap: 32px;
+  }
+}
+
+@media (min-width: 2000px) {
+  .page {
+    grid-template-columns: auto 450px;
+  }
+}
+
 header {
+    grid-area: header;
     display: grid;
     grid-template-columns: min-content min-content auto;
     gap: 24px;
@@ -6,7 +76,7 @@ header {
     padding: 24px 40px 0 40px;
 }
 
-header>div:nth-child(1) {
+header .logo {
     background: #171717;
     border-radius: 16px;
     width: 48px;
@@ -19,12 +89,12 @@ header>div:nth-child(1) {
     cursor: pointer;
 }
 
-header>div:nth-child(2) {
+header .input {
     min-width: 300px;
     height: 32px;
 }
 
-header>div:nth-child(3) {
+header .header-right {
     justify-self: end;
     display: flex;
     gap: 24px;
@@ -44,4 +114,31 @@ header button {
 header .profile img {
     width: 48px;
     height: 48px;
-}
+}
+
+@media (max-width: 1020px) {
+  header {
+    padding: 8px 16px 8px 16px;
+    gap: 8px;
+  }
+
+  header .header-right {
+    gap: 8px;
+  }
+
+  header .input {
+    min-width: unset;
+  }
+
+  header .input .search-input {
+    display: none;
+  }
+
+  header .new-stream-button-text {
+    display: none;
+  }
+
+  header .profile img {
+    border-radius: 12px;
+  }
+}

src/pages/layout.tsx

@@ -37,10 +37,11 @@ export function LayoutPage() {
           className="btn btn-primary"
           onClick={() => setNewStream(true)}
         >
-          New Stream
+          <span className="new-stream-button-text">New Stream</span>
           <Icon name="signal" />
         </button>
         <Profile
+          avatarClassname="mb-squared"
           pubkey={login.pubkey}
           options={{
             showName: false,
@@ -77,14 +78,16 @@ export function LayoutPage() {
   }
 
   return (
-    <>
+    <div className="page">
       <header>
-        <div onClick={() => navigate("/")}>S</div>
+        <div className="logo" onClick={() => navigate("/")}>
+          S
+        </div>
         <div className="input">
-          <input type="text" placeholder="Search" />
+          <input className="search-input" type="text" placeholder="Search" />
           <Icon name="search" size={15} />
         </div>
-        <div>
+        <div className="header-right">
           {loggedIn()}
           {loggedOut()}
         </div>
@@ -95,6 +98,6 @@ export function LayoutPage() {
           <NewStream onFinish={goToStream} />
         </Modal>
       )}
-    </>
+    </div>
   );
 }

src/pages/root.css

@@ -5,6 +5,24 @@
     padding: 40px;
 }
 
+@media (max-width: 1020px) {
+  .video-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+      padding: 16px;
+  }
+}
+
+@media (max-width: 720px) {
+  .video-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 12px;
+      padding: 16px;
+  }
+}
+
 @media(min-width: 1600px) {
     .video-grid {
         grid-template-columns: repeat(6, 1fr);
@@ -18,7 +36,6 @@
 }
 
 .homepage h2 {
-
     background: #171717;
     padding: 40px;
-}
+}

src/pages/stream-page.css

@@ -1,27 +1,21 @@
-.live-page {
+.video-content {
-  display: grid;
+  grid-area: video-content;
-  height: calc(100vh - 72px - 32px - 32px);
-  padding: 32px 40px;
-  grid-template-columns: auto 376px;
-  gap: 32px;
 }
 
-@media (min-width: 2000px) {
+
-  .live-page {
+.video-content video {
-    grid-template-columns: auto 450px;
+  width: 100%;
+  aspect-ratio: 16/9;
+  max-height: 230px;
+}
+
+@media (min-width: 768px){
+  .video-content video {
+    max-height: unset;
   }
 }
 
-.live-page>div:nth-child(1) {
+.pill {
-  overflow-y: auto;
-}
-
-.live-page video {
-  width: 100%;
-  aspect-ratio: 16/9;
-}
-
-.live-page .pill {
   font-weight: 700;
   font-size: 14px;
   line-height: 18px;
@@ -29,62 +23,106 @@
   text-transform: uppercase;
 }
 
-.live-page .pill.live {
+.pill.live {
   color: inherit;
 }
 
-.live-page .info {
+.profile-info {
-  margin-top: 32px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+  width: 100%;
 }
 
-.live-page .info h1 {
+@media (min-width: 1020px) {
+  .info {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .profile-info {
+    width: unset;
+  }
+}
+
+.live-chat .header {
+  display: none;
+}
+
+.stream-info {
+  display: none;
+}
+
+@media (min-width: 1020px) {
+  .live-chat .header {
+    display: block;
+  }
+
+  .stream-info {
+    display: block;
+  }
+}
+
+.info {
+  grid-area: profile;
+  margin-top: 8px
+}
+
+@media (min-width: 1020px) {
+  .info {
+    margin-top: 32px;
+  }
+}
+
+.info h1 {
   margin: 0 0 8px 0;
   font-weight: 600;
   font-size: 28px;
   line-height: 35px;
 }
 
-.live-page .info p {
+.info p {
   margin: 0 0 12px 0;
 }
 
-.live-page .tags {
+.tags {
   display: flex;
   gap: 8px;
 }
 
-.live-page .actions {
+.actions {
   margin: 8px 0 0 0;
   display: flex;
   gap: 12px;
 }
 
-.live-page .btn.zap {
+.info .btn.zap {
   padding: 12px 16px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.live-page .offline {
+.offline {
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.live-page .online>div {
+.online>div {
   display: none;
 }
 
-.live-page .offline>div {
+.offline>div {
   position: fixed;
   text-transform: uppercase;
   font-size: 30px;
   font-weight: 700;
 }
 
-.live-page .offline>video {
+.offline>video {
   z-index: -1;
   position: relative;
-}
+}

src/pages/stream-page.tsx

@@ -1,7 +1,8 @@
 import "./stream-page.css";
-import { useState } from "react";
+import { useRef, useState, useLayoutEffect } from "react";
 import { parseNostrLink, EventPublisher } from "@snort/system";
 import { useNavigate, useParams } from "react-router-dom";
+import useResizeObserver from "@react-hook/resize-observer";
 import moment from "moment";
 
 import useEventFeed from "hooks/event-feed";
@@ -15,26 +16,23 @@ import { useLogin } from "hooks/login";
 import { StreamState, System } from "index";
 import Modal from "element/modal";
 import { SendZaps } from "element/send-zap";
+import type { NostrLink } from "@snort/system";
 import { useUserProfile } from "@snort/system-react";
 import { NewStream } from "element/new-stream";
 
-export function StreamPage() {
+function ProfileInfo({ link }: { link: NostrLink }) {
-  const params = useParams();
-  const link = parseNostrLink(params.id!);
   const thisEvent = useEventFeed(link, true);
   const login = useLogin();
   const navigate = useNavigate();
   const [zap, setZap] = useState(false);
   const [edit, setEdit] = useState(false);
   const profile = useUserProfile(System, thisEvent.data?.pubkey);
+  const zapTarget = profile?.lud16 ?? profile?.lud06;
 
-  const stream = findTag(thisEvent.data, "streaming");
   const status = findTag(thisEvent.data, "status");
-  const image = findTag(thisEvent.data, "image");
   const start = findTag(thisEvent.data, "starts");
   const isLive = status === "live";
   const isMine = link.author === login?.pubkey;
-  const zapTarget = profile?.lud16 ?? profile?.lud06;
 
   async function deleteStream() {
     const pub = await EventPublisher.nip7();
@@ -47,59 +45,54 @@ export function StreamPage() {
   }
 
   return (
-    <div className="live-page">
+    <>
-      <div>
+      <div className="flex info">
-        <LiveVideoPlayer stream={stream} autoPlay={true} poster={image} />
+        <div className="f-grow stream-info">
-        <div className="flex info">
+          <h1>{findTag(thisEvent.data, "title")}</h1>
-          <div className="f-grow">
+          <p>{findTag(thisEvent.data, "summary")}</p>
-            <h1>{findTag(thisEvent.data, "title")}</h1>
+          <div className="tags">
-            <p>{findTag(thisEvent.data, "summary")}</p>
+            <span className={`pill${isLive ? " live" : ""}`}>{status}</span>
-            <div className="tags">
+            {status === StreamState.Planned && (
-              <span className={`pill${isLive ? " live" : ""}`}>{status}</span>
+              <span className="pill">
-              {status === StreamState.Planned && <span className="pill">Starts {moment(Number(start) * 1000).fromNow()}</span>}
+                Starts {moment(Number(start) * 1000).fromNow()}
-              {thisEvent.data?.tags
+              </span>
-                .filter((a) => a[0] === "t")
-                .map((a) => a[1])
-                .map((a) => (
-                  <span className="pill" key={a}>
-                    {a}
-                  </span>
-                ))}
-            </div>
-            {isMine && (
-              <div className="actions">
-                <button
-                  type="button"
-                  className="btn"
-                  onClick={() => setEdit(true)}
-                >
-                  Edit
-                </button>
-                <AsyncButton
-                  type="button"
-                  className="btn btn-red"
-                  onClick={deleteStream}
-                >
-                  Delete
-                </AsyncButton>
-              </div>
             )}
+            {thisEvent.data?.tags
+              .filter((a) => a[0] === "t")
+              .map((a) => a[1])
+              .map((a) => (
+                <span className="pill" key={a}>
+                  {a}
+                </span>
+              ))}
           </div>
-          <div>
+          {isMine && (
-            <div className="flex g24">
+            <div className="actions">
-              <Profile pubkey={thisEvent.data?.pubkey ?? ""} />
               <button
-                onClick={() => setZap(true)}
+                type="button"
-                className="btn btn-primary zap"
+                className="btn"
+                onClick={() => setEdit(true)}
               >
-                Zap
+                Edit
-                <Icon name="zap" size={16} />
               </button>
+              <AsyncButton
+                type="button"
+                className="btn btn-red"
+                onClick={deleteStream}
+              >
+                Delete
+              </AsyncButton>
             </div>
-          </div>
+          )}
+        </div>
+        <div className="profile-info flex g24">
+          <Profile pubkey={thisEvent.data?.pubkey ?? ""} />
+          <button onClick={() => setZap(true)} className="btn btn-primary zap">
+            Zap
+            <Icon name="zap" size={16} />
+          </button>
         </div>
       </div>
-      <LiveChat link={link} />
       {zap && zapTarget && thisEvent.data && (
         <Modal onClose={() => setZap(false)}>
           <SendZaps
@@ -112,12 +105,74 @@ export function StreamPage() {
       )}
       {edit && thisEvent.data && (
         <Modal onClose={() => setEdit(false)}>
-          <NewStream
+          <NewStream ev={thisEvent.data} onFinish={() => setEdit(false)} />
+        </Modal>
+      )}
+    </>
+  );
+}
+
+function VideoPlayer({ link }: { link: NostrLink }) {
+  const thisEvent = useEventFeed(link);
+  const [zap, setZap] = useState(false);
+  const [edit, setEdit] = useState(false);
+  const profile = useUserProfile(System, thisEvent.data?.pubkey);
+  const zapTarget = profile?.lud16 ?? profile?.lud06;
+
+  const stream = findTag(thisEvent.data, "streaming");
+  const image = findTag(thisEvent.data, "image");
+
+  return (
+    <>
+      {zap && zapTarget && thisEvent.data && (
+        <Modal onClose={() => setZap(false)}>
+          <SendZaps
+            lnurl={zapTarget}
             ev={thisEvent.data}
-            onFinish={() => setEdit(false)}
+            targetName={getName(thisEvent.data.pubkey, profile)}
+            onFinish={() => setZap(false)}
           />
         </Modal>
       )}
-    </div>
+      {edit && thisEvent.data && (
+        <Modal onClose={() => setEdit(false)}>
+          <NewStream ev={thisEvent.data} onFinish={() => setEdit(false)} />
+        </Modal>
+      )}
+      <div className="video-content">
+        <LiveVideoPlayer stream={stream} autoPlay={true} poster={image} />
+      </div>
+    </>
+  );
+}
+
+export function StreamPage() {
+  const ref = useRef(null);
+  const params = useParams();
+  const link = parseNostrLink(params.id!);
+  const [height, setHeight] = useState<number | undefined>();
+
+  function setChatHeight() {
+    const contentHeight =
+      document.querySelector(".live-page")?.clientHeight || 0;
+    const videoContentHeight =
+      document.querySelector(".video-content")?.clientHeight || 0;
+    if (window.innerWidth <= 480) {
+      setHeight(contentHeight - videoContentHeight);
+    } else {
+      setHeight(undefined);
+    }
+  }
+
+  useLayoutEffect(setChatHeight, []);
+  useResizeObserver(ref, () => setChatHeight());
+
+  return (
+    <>
+      <div ref={ref}></div>
+      <VideoPlayer link={link} />
+      <ProfileInfo link={link} />
+      <LiveChat link={link} height={height} />
+    </>
   );
 }

yarn.lock

@@ -1634,6 +1634,11 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@juggle/resize-observer@^3.3.1":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
+
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@@ -1694,6 +1699,25 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@react-hook/latest@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@react-hook/latest/-/latest-1.0.3.tgz#c2d1d0b0af8b69ec6e2b3a2412ba0768ac82db80"
+  integrity sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==
+
+"@react-hook/passive-layout-effect@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
+  integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
+
+"@react-hook/resize-observer@^1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@react-hook/resize-observer/-/resize-observer-1.2.6.tgz#9a8cf4c5abb09becd60d1d65f6bf10eec211e291"
+  integrity sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==
+  dependencies:
+    "@juggle/resize-observer" "^3.3.1"
+    "@react-hook/latest" "^1.0.2"
+    "@react-hook/passive-layout-effect" "^1.2.0"
+
 "@remix-run/router@1.6.3":
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.3.tgz#8205baf6e17ef93be35bf62c37d2d594e9be0dad"