Fix: skeleton responsiveness

sliit-foss · Oct 10, 2023 · aeda28e · aeda28e
1 parent 23162da
commit aeda28e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/components/home/score-card/skeleton.jsx b/src/components/home/score-card/skeleton.jsx
@@ -2,15 +2,19 @@ import { Skeleton } from "@sliit-foss/bashaway-ui/components";
 
 const ScoreCardSkeleton = () => {
   return Array.from({ length: 4 }).map((_, i) => (
-    <Skeleton key={i} className="px-6 py-5 rounded-2xl flex w-full justify-between items-center">
+    <Skeleton key={i} className="px-6 py-5 rounded-2xl flex flex-wrap w-full justify-between items-center" single>
       <div className="flex gap-6 items-center">
-        <Skeleton shade="dark" className="w-[64px] h-[64px] rounded-2xl" />
+        <Skeleton shade="dark" className="w-14 sm:w-16 h-14 sm:h-16 rounded-2xl" />
         <div className="flex flex-col gap-1">
-          <Skeleton shade="dark" className="h-[24px] w-24 mb-[5px]" />
+          <Skeleton shade="dark" className="h-[24px] w-28 mb-[5px]" />
           <Skeleton shade="dark" className="h-[18px] w-[72px] rounded-2xl" />
         </div>
       </div>
-      <Skeleton shade="dark" className="px-5 py-3 rounded-full min-w-[116px] h-12" />
+      <Skeleton
+        shade="dark"
+        containerClassName="min-w-[116px] w-full sm:w-auto"
+        className="px-5 py-1.5 sm:py-3 rounded-full w-full h-12 sm:h-14 mt-4 sm:mt-0"
+      />
     </Skeleton>
   ));
 };

diff --git a/src/components/layout/footer.jsx b/src/components/layout/footer.jsx
@@ -28,8 +28,8 @@ const Footer = ({ className }) => {
           <div className="flex flex-col items-center md:items-start gap-y-5 col-start-1">
             <FOSS />
             <p className="md:w-[320px] px-2 sm:px-0 text-sm text-center md:text-left text-gray-500 opacity-80 font-consolas">
-              Welcome to the SLIIT FOSS Community. We&apos;re a group of volunteers who believe in the usage of Free and Open
-              Source Software (FOSS)
+              Welcome to the SLIIT FOSS Community. We&apos;re a group of volunteers who believe in the usage of Free and
+              Open Source Software (FOSS)
             </p>
             <div className="font-semibold text-[20px] font-cabinet">CONNECT WITH US</div>
             <div className="flex space-x-3 flex-shrink-0 -ml-0.5">