Fix/layout overflow (#981)

* Added more style to the homepage

* Added more style to the DevelopmentSection

* Added more style to the social media

* Replaced twitter icon

* Added more style to About and Article Preview sections

* Added more style to the Product Element

* Added more style to the SearchResultsHeader

* Added more style to ProductDetails mobile view

Author: Magda-R-bit

src/assets/1-prom-strona.png

@@ -10,24 +10,41 @@ import { SecondaryButton } from './buttons/SecondaryButton';
 import { ResponsiveImage } from './images/ResponsiveImage';
 
 import { Text, TitleSection, WrapperSection } from '@Styles/GlobalStyle.css';
-import { color, fontSize, margin, padding } from '@Styles/theme';
+import { Device, color, fontSize, margin, padding } from '@Styles/theme';
 
 const Wrapper = styled(WrapperSection)`
   grid-area: about;
-  margin: 0;
+  margin-top: 3rem;
   padding: 0;
   display: flex;
   flex-direction: column-reverse;
+  text-align: center;
+
+  @media ${Device.mobile} {
+    width: 100%;
+    margin: 0 0.5rem;
+  }
 `;
 
 const MockUp = styled.div`
   height: 100%;
+  display: flex;
+  justify-content: center;
 
   .gatsby-image-wrapper {
     width: 100%;
+    img {
+      width: 100%;
+      max-width: 100%;
+      display: block;
+      
+    }
 
     div {
-      height: 17.8em !important;
+      height: 10em !important;
+      @media ${Device.mobile} {
+        height: 14em !important;
+      }
     }
   }
 `;

src/assets/social-media/twitter.png

@@ -8,15 +8,15 @@ const LogoContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: ${padding.normal};
+  margin-bottom: ${padding.small};
   background-color: ${color.background.lightGray};
   border-radius: 0.5rem;
-  padding: ${padding.normal};
-  min-height: 80px;
+  padding: ${padding.tiny};
+  min-height: 60px;
 
   img {
     max-width: 100%;
-    max-height: 120px;
+    max-height: 50px;
     object-fit: contain;
   }
 `;

src/assets/social-media/twitter_fill.png

@@ -16,7 +16,6 @@ import { Device, color, fontSize, margin, padding } from '@Styles/theme';
 
 const Info = styled.div`
   width: 100%;
-  height: 12em;
   position: relative;
   margin: ${margin.small} 0;
 
@@ -27,7 +26,6 @@ const Info = styled.div`
 
 const TextSection = styled.div`
   margin-right: ${margin.normal};
-  padding: 0 ${padding.normal};
   background-color: ${color.background.white};
   display: flex;
   flex-direction: column;
@@ -46,8 +44,9 @@ const Texts = styled.div`
 `;
 
 const Column = styled(ContentColumn)`
+  justify-content: flex-start;
   align-items: center;
-  justify-content: center;
+  gap: ${margin.small};
 `;
 
 const Buttons = styled.div`
@@ -56,14 +55,20 @@ const Buttons = styled.div`
 
 const DevelopmentTitle = styled(TitleSection)`
   margin-bottom: ${margin.normal};
+  text-align: center;
 `;
 
 const DevelopmentText = styled(Text)`
   margin-bottom: ${margin.big};
+  text-align: center;
 `;
 
 const Columns = styled(ColumnsLayout)`
   gap: ${margin.normal};
+  align-items: flex-start;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: visible;
 `;
 
 const ImgSection = styled.div`
@@ -89,7 +94,7 @@ const Container = styledContainerQuery(Wrapper)`
   display: flex;
   flex-direction: row;
   grid-area: development;
-  min-height: 16.1em;
+  min-height: 0;
   width: 100%;
 
   @media ${Device.mobile} {
@@ -108,36 +113,9 @@ const Container = styledContainerQuery(Wrapper)`
     border-bottom: 8px solid ${color.background.red};
     border-right: none;
     margin-top: ${margin.small};
-
-    ${Texts}{
-      width: 100%;
-    }
-
-    ${Info}{
-      height: 10em;
-    }
-
-    ${Columns}{
-      flex-direction: column;
-    }
-
-    ${Column}{
-      width: 100%;
-    }
-
-    ${Info}{
-      height: 10em;
-    }
-
-    ${ImgSection}{
-      .gatsby-image-wrapper {
-        picture {
-          img {
-            height: 10em !important;
-          }
-        }
-      }
-    }
+    ${Texts} { width: 100%; }
+    ${Columns} { flex-direction: column; }
+    ${Column} { width: 100%; }
   }
 `;
 

src/components/About.tsx

@@ -77,7 +77,6 @@ interface IScoreBar {
 export const ScoreBar: React.FC<IScoreBar> = ({ value, unit, animation, missingValuePlaceholder }) => {
   if (value !== undefined) {
     const knownValue = value !== null ? value : 0;
-    const scoreText = unit ? `${knownValue} ${unit}` : knownValue.toString();
     return (
       <ValueBar value={knownValue} animation={animation}>
         <div className="value-belt" data-testid="value-belt" />

src/components/CompanyLogo.tsx

@@ -3,7 +3,7 @@ import styled, { keyframes } from "styled-components";
 import { lighten } from "polished";
 
 import { seconds } from "app/generics";
-import { color, fontSize } from "@Styles/theme";
+import { Device, color, fontSize } from "@Styles/theme";
 
 export interface IAnimation {
   duration: seconds;
@@ -55,6 +55,11 @@ const GaugeWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  @media ${Device.mobile} {
+    width: ${SIZE * 0.5}px;
+    height: ${SIZE * 0.5}px;
+    margin-top: 10px;
+  }
 
   .label {
     position: absolute;
@@ -63,6 +68,10 @@ const GaugeWrapper = styled.div`
     z-index: 2;
     text-align: center;
     top: 32px;
+    @media ${Device.mobile} {
+      font-size: 14px;
+      top: 10px;
+    }
   }
 
   .subtitle {
@@ -73,6 +82,10 @@ const GaugeWrapper = styled.div`
     font-size: 12px;
     color: ${color.text ? color.text.primary : "#000"};
     z-index: 2;
+    @media ${Device.mobile} {
+      font-size: 10px;
+      top: 40px;
+    }
   }
 `;
 

src/components/DevelopmentSection.tsx

@@ -13,7 +13,6 @@ const Items = styled.div`
   display: flex;
   flex-direction: row;
   width: 80%;
-  float: left;
 
   @media ${Device.mobile} {
     width: 100%;
@@ -44,8 +43,11 @@ const Container = styledContainerQuery.div`
   height: 100%;
   grid-area: social-media;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  margin-bottom: 20px;
+  gap: 40px;
 
   @media ${Device.mobile} {
     padding: 30px 0;
@@ -75,7 +77,6 @@ const SocialMedia = () => {
         <Facebook />
         <Instagram />
         <Twitter />
-        <Item />
       </Items>
     </Container>
   );

src/components/ScoreBar.tsx

@@ -1,7 +1,7 @@
 import { Facebook, Instagram, Twitter } from 'components/social-media/Icons';
 import * as React from 'react';
 import styled from 'styled-components';
-import { Device, padding } from 'styles/theme';
+import { Device, padding, textAlign } from 'styles/theme';
 import { TextExternalLink, TextLink } from 'utils/browser/links';
 
 import { urls } from '@App/website';
@@ -48,7 +48,7 @@ export const CommunitySections: React.FC<ICommunitySections> = (props) => (
       <TextLink label="Polityka prywatności" href={urls.pola.privacyPolicy()} />
       <TextExternalLink label="Uzupełnij dane o firmie" url={urls.external.links.newCompanyForm} />
     </FooterSection>
-    <FooterSection title="Śledź nas na:">
+    <FooterSection title="Śledź nas na:" textAlign="center">
       <div className="social-rows">
         <Facebook type="filled" />
         <Instagram type="filled" />