From b9e7e573668c43d3423dd9bfea59966b146cbc89 Mon Sep 17 00:00:00 2001
From: Sawa <34698182+sawaYch@users.noreply.github.com>
Date: Thu, 7 Mar 2024 21:12:37 +0800
Subject: [PATCH] fix(ui): responsive

---
 components/livestream-metadata-card.tsx |  2 +-
 components/poll-app-core.tsx            |  6 ++--
 package-lock.json                       | 39 +++++++++++++++++++++++++
 package.json                            |  1 +
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/components/livestream-metadata-card.tsx b/components/livestream-metadata-card.tsx
index 5461f77..62188c3 100644
--- a/components/livestream-metadata-card.tsx
+++ b/components/livestream-metadata-card.tsx
@@ -9,7 +9,7 @@ const LiveStreamMetadataCard = () => {
   return (
     <>
       <BrowserView>
-        <Card className='flex flex-col items-center justify-center'>
+        <Card className='flex h-full flex-col items-center justify-center'>
           <CardContent className='flex flex-col items-center justify-center gap-8 p-4'>
             <Image
               src={liveMetadata?.thumbnail ?? ''}
diff --git a/components/poll-app-core.tsx b/components/poll-app-core.tsx
index f7d8095..77fa2da 100644
--- a/components/poll-app-core.tsx
+++ b/components/poll-app-core.tsx
@@ -90,9 +90,9 @@ const PollAppCore = () => {
       {isReady && (
         <>
           <div
-            className={cn('flex flex-col', {
-              'flex-row space-x-2': !isMobile,
-              'space-y-2': isMobile,
+            className={cn('flex', {
+              'space-x-2': !isMobile,
+              'flex-col space-y-2': isMobile,
             })}
           >
             <LiveStreamMetadataCard />
diff --git a/package-lock.json b/package-lock.json
index 937dd2c..2d47b83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "dayjs": "^1.11.10",
+        "framer-motion": "^11.0.8",
         "lucide-react": "^0.343.0",
         "next": "14.1.0",
         "next-themes": "^0.2.1",
@@ -79,6 +80,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2858,6 +2874,29 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.0.8",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.8.tgz",
+      "integrity": "sha512-1KSGNuqe1qZkS/SWQlDnqK2VCVzRVEoval379j0FiUBJAZoqgwyvqFkfvJbgW2IPFo4wX16K+M0k5jO23lCIjA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index f080b72..cf5bae2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
+    "framer-motion": "^11.0.8",
     "lucide-react": "^0.343.0",
     "next": "14.1.0",
     "next-themes": "^0.2.1",