style: mobile responsive design

public/icons/show-more.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0" y="2" width="2" height="2" fill="black" />
+    <rect x="5" y="2" width="2" height="2" fill="black" />
+    <rect x="10" y="2" width="2" height="2" fill="black" />
+</svg>

src/components/BU/About/BUAbout.tsx

@@ -1,4 +1,6 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import { useState } from 'react'
 import BUSection from '../BUSection'
 
 type Props = {
@@ -6,13 +8,22 @@ type Props = {
 }
 
 const BUAbout = ({ data }: Props) => {
+  const [showMore, setShowMore] = useState(false)
+
+  const handleShowMore = () => {
+    setShowMore(!showMore)
+  }
+
   return (
     <Container>
       <BUSection
         title={'About'}
         description={
           <>
-            <p>{data?.description}</p>
+            <Paragraph showMore={showMore}>{data?.description}</Paragraph>
+            <ShowMore onClick={handleShowMore}>
+              <img src={'/icons/show-more.svg'} alt={'show-more'} />
+            </ShowMore>
           </>
         }
       />
@@ -25,8 +36,35 @@ const Container = styled.div`
   flex-direction: column;
   padding: 0 16px;
 
-  p {
+  @media (max-width: ${breakpoints.md}px) {
+    padding: 0 8px;
+  }
+`
+
+const Paragraph = styled.p<{ showMore: boolean }>`
+  @media (max-width: ${breakpoints.md}px) {
     padding-top: 24px;
+    display: ${({ showMore }) => (showMore ? 'block' : '-webkit-box')};
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 7;
+    overflow: hidden;
+  }
+`
+
+const ShowMore = styled.button`
+  background: transparent;
+  margin-top: 12px;
+  display: flex;
+  padding: 9px 12px;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  border-radius: 999px;
+  background: #f2f2f2;
+  border: none;
+
+  @media (min-width: ${breakpoints.md}px) {
+    display: none;
   }
 `
 

src/components/BU/BUHero.tsx

@@ -38,59 +38,61 @@ export const BUHero = ({ data }: Props) => {
           </Title>
         </Header>
         <Content>
-          <table>
-            <thead>
-              <tr>
-                <th>Development status</th>
-                <th>Vertical</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>{data?.devStatus}</td>
-                <td>{data?.vertical}</td>
-              </tr>
-            </tbody>
-          </table>
-          <table>
-            <thead>
-              <tr>
-                <th>Achievements</th>
-                <th>Founders</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>{data?.achievements}</td>
-                <td>{data?.founders}</td>
-              </tr>
-            </tbody>
-          </table>
-          <Description>{data?.description}</Description>
-          <table>
-            <thead>
-              <tr>
-                <th>Connect:</th>
-                <th>Programme lead:</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  {data?.connect?.map((item: any) => (
-                    <Link
-                      key={item.label + '-link'}
-                      href={item.link}
-                      target="_blank"
-                    >
-                      {item?.label}
-                    </Link>
-                  ))}
-                </td>
-                <td>{data?.lead}</td>
-              </tr>
-            </tbody>
-          </table>
+          <div>
+            <table>
+              <thead>
+                <tr>
+                  <th>Development status</th>
+                  <th>Vertical</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>{data?.devStatus}</td>
+                  <td>{data?.vertical}</td>
+                </tr>
+              </tbody>
+            </table>
+            <table>
+              <thead>
+                <tr>
+                  <th>Achievements</th>
+                  <th>Founders</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>{data?.achievements}</td>
+                  <td>{data?.founders}</td>
+                </tr>
+              </tbody>
+            </table>
+            <Description>{data?.description}</Description>
+            <table>
+              <thead>
+                <tr>
+                  <th>Connect:</th>
+                  <th>Programme lead:</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    {data?.connect?.map((item: any) => (
+                      <Link
+                        key={item.label + '-link'}
+                        href={item.link}
+                        target="_blank"
+                      >
+                        {item?.label}
+                      </Link>
+                    ))}
+                  </td>
+                  <td>{data?.lead}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <Buttons>
             {data?.website && (
               <Link href={data?.website} target="_blank">
@@ -287,6 +289,10 @@ const Content = styled.div`
     }
 
     table {
+      margin-bottom: 16px;
+    }
+
+    table:last-of-type {
       margin-bottom: 0;
     }
 
@@ -295,9 +301,10 @@ const Content = styled.div`
       font-size: 14px;
       padding: 16px 0 8px 0;
     }
-  }
 
-  @media (max-width: ${breakpoints.md}px) {
+    tbody {
+    }
+
     padding-bottom: 80px;
 
     button {

src/components/BU/Media/BUMedia.tsx

@@ -65,6 +65,8 @@ const Container = styled.div`
   padding: 0 16px;
 
   @media (max-width: ${breakpoints.md}px) {
+    padding: 0 8px;
+
     & > div > div {
       border-bottom: 0;
       margin-bottom: 8px;

src/components/BU/Milestones/BUMilestones.tsx

@@ -38,6 +38,10 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   padding: 0 16px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    padding: 0 8px;
+  }
 `
 
 const ScrollableContainer = styled.div`
@@ -54,8 +58,9 @@ const ScrollableContainer = styled.div`
   }
 
   @media (max-width: ${breakpoints.md}px) {
-    width: 100vw;
+    width: calc(100vw - 8px);
     margin-top: 8px;
+    margin-left: -8px;
   }
 `
 

src/components/BU/Team/BUTeam.tsx

@@ -76,6 +76,8 @@ const Container = styled.div`
   padding: 0 16px;
 
   @media (max-width: ${breakpoints.md}px) {
+    padding: 0 8px;
+
     & > div > div {
       border-bottom: 0;
     }
@@ -85,7 +87,7 @@ const Container = styled.div`
     }
 
     h3 {
-      margin-top: 8px;
+      margin-bottom: 8px;
       font-size: 22px;
       line-height: 122%;
     }

src/components/Challenges/ChallengeList.tsx

@@ -108,15 +108,10 @@ const NoChallenges = styled.p`
   text-decoration: none;
 `
 
-// const Mark = styled(Image)`
-//   @media (max-width: ${breakpoints.md}px) {
-//     display: none;
-//   }
-// `
-
 const CustomBox = styled(Box)`
   @media (max-width: ${breakpoints.md}px) {
     margin-bottom: 80px;
+    padding: 0 8px;
   }
 `
 

src/components/Jobs/JobList.tsx

@@ -27,7 +27,7 @@ const JobList = ({
   }
 
   return (
-    <Box marginTop={marginTop} marginBottom={marginBottom}>
+    <CustomBox marginTop={marginTop} marginBottom={marginBottom}>
       {Object.entries(jobs)
         .filter(([businessUnit, _]) =>
           !activeBUs?.length ? true : activeBUs.includes(businessUnit),
@@ -46,7 +46,7 @@ const JobList = ({
             </Jobs>
           </Container>
         ))}
-    </Box>
+    </CustomBox>
   )
 }
 
@@ -100,4 +100,10 @@ const NoJobs = styled.p`
   text-decoration: none;
 `
 
+const CustomBox = styled(Box)`
+  @media (max-width: ${breakpoints.md}px) {
+    padding: 0 8px;
+  }
+`
+
 export default JobList