From 7d9f9019c2b8bd54853684ff419dc1bba6c2ff30 Mon Sep 17 00:00:00 2001
From: Kingkor Roy Tirtho <krtirtho@gmail.com>
Date: Tue, 19 Jul 2022 10:56:49 +0600
Subject: [PATCH] [website] responsiveness issues fixed downloads section

---
 website/pages/index.tsx                       | 23 +++++++++++++------
 .../pages/other-downloads/package-manager.tsx |  2 +-
 .../other-downloads/stable-downloads.tsx      |  7 ++++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/website/pages/index.tsx b/website/pages/index.tsx
index 41f5a942..d88c807e 100755
--- a/website/pages/index.tsx
+++ b/website/pages/index.tsx
@@ -16,13 +16,22 @@ const Root = () => {
           bgPos="right"
         >
           <VStack mt="10" mx="6" spacing="4" alignItems="flex-start">
-            <Heading color="#212121" size="2xl">
-              Spotube
-            </Heading>
-            <Heading color="#212121" size="lg" maxW="500px">
-              A fast, modern, lightweight & efficient Spotify Music Client for
-              every platform
-            </Heading>
+            <chakra.section
+              p={{ base: "5", md: "0" }}
+              borderRadius="2xl"
+              bgColor={{
+                base: "#f5f5f599",
+                md: "transparent",
+              }}
+            >
+              <Heading color="#212121" size="2xl">
+                Spotube
+              </Heading>
+              <Heading color="#212121" size="lg" maxW="500px">
+                A fast, modern, lightweight & efficient Spotify Music Client for
+                every platform
+              </Heading>
+            </chakra.section>
             <DownloadButton />
           </VStack>
         </chakra.section>
diff --git a/website/pages/other-downloads/package-manager.tsx b/website/pages/other-downloads/package-manager.tsx
index c5e8e4fd..bfed7f3f 100644
--- a/website/pages/other-downloads/package-manager.tsx
+++ b/website/pages/other-downloads/package-manager.tsx
@@ -17,7 +17,7 @@ import { DisplayAd } from "components/special";
 export default function PackageManagerPage() {
   return (
     <VStack p="5" spacing="5">
-      <VStack align="start" maxW="2xl">
+      <VStack align="start" w="full" maxW="2xl">
         <Heading>Installation using Package Managers</Heading>
         <Text>
           If you don&apos;t want to download the binary of Spotube, you can use
diff --git a/website/pages/other-downloads/stable-downloads.tsx b/website/pages/other-downloads/stable-downloads.tsx
index 9a260b33..10cf7572 100644
--- a/website/pages/other-downloads/stable-downloads.tsx
+++ b/website/pages/other-downloads/stable-downloads.tsx
@@ -19,7 +19,7 @@ import { DisplayAd, InFeedAd } from "components/special";
 import { GetServerSideProps, NextPage } from "next";
 import { MarkdownComponentDefs } from "misc/MarkdownComponentDefs";
 import { octokit } from "configurations/ocotokit";
-import gemoji from "remark-gemoji"
+import gemoji from "remark-gemoji";
 
 enum AssetTypes {
   sums = "sums",
@@ -148,7 +148,10 @@ const StableDownloads: NextPage<Props> = ({ data }) => {
                         borderRadius={`0 5px 5px ${
                           assets.length !== 1 ? 5 : 0
                         }px`}
-                        w="72"
+                        w={{
+                          base: "full",
+                          sm: "72",
+                        }}
                       >
                         {assets.map((asset) => {
                           return (