From 208dc617aaba0613289e75b8ac5f6ffa888946db Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Tue, 24 Nov 2020 23:40:22 +0200
Subject: [PATCH] Responsiveness fixes

---
 src/components/Hero/HeroPrimaryButtons.tsx   | 2 +-
 src/components/Hero/HeroSecondarySection.tsx | 2 +-
 src/components/Sections/TextSection.tsx      | 3 +++
 src/views/ActualPage/FilterContainer.tsx     | 1 +
 src/views/CorporatePage/JobAdList.tsx        | 1 +
 src/views/GuildPage/GuildPageView.tsx        | 2 +-
 src/views/StudiesPage/StudiesPageView.tsx    | 1 +
 7 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Hero/HeroPrimaryButtons.tsx b/src/components/Hero/HeroPrimaryButtons.tsx
index d05b9e7..251ad6f 100644
--- a/src/components/Hero/HeroPrimaryButtons.tsx
+++ b/src/components/Hero/HeroPrimaryButtons.tsx
@@ -6,7 +6,7 @@ const Buttons = styled.div<{row?: boolean}>`
   max-width: fit-content;
   margin: auto;
   display: flex;
-  flex-direction: ${(p) => p.row ? "row" : "column"};
+  flex-flow: ${(p) => p.row ? "row" : "column"} wrap;
 
   a {
     display: contents;
diff --git a/src/components/Hero/HeroSecondarySection.tsx b/src/components/Hero/HeroSecondarySection.tsx
index 16dfab9..806211b 100644
--- a/src/components/Hero/HeroSecondarySection.tsx
+++ b/src/components/Hero/HeroSecondarySection.tsx
@@ -46,7 +46,7 @@ const Section = styled.section`
 
 const Items = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
 `;
 
 interface HeroSecondarySectionProps {
diff --git a/src/components/Sections/TextSection.tsx b/src/components/Sections/TextSection.tsx
index c5d48fb..c2146d2 100644
--- a/src/components/Sections/TextSection.tsx
+++ b/src/components/Sections/TextSection.tsx
@@ -6,6 +6,9 @@ const StyledSection = styled.section`
   display: grid;
   padding: 24px;
 
+  word-break: break-word;
+  hyphens: auto;
+
   grid-template-columns: 1fr 2fr 1fr;
   grid-template-rows: 1fr auto;
   grid-template-areas:
diff --git a/src/views/ActualPage/FilterContainer.tsx b/src/views/ActualPage/FilterContainer.tsx
index 2fe9f83..3900c44 100644
--- a/src/views/ActualPage/FilterContainer.tsx
+++ b/src/views/ActualPage/FilterContainer.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 const FilterContainer = styled.div`
   display: flex;
+  flex-flow: row wrap;
   margin: auto;
   justify-content: center;
 `;
diff --git a/src/views/CorporatePage/JobAdList.tsx b/src/views/CorporatePage/JobAdList.tsx
index f2beca0..8509994 100644
--- a/src/views/CorporatePage/JobAdList.tsx
+++ b/src/views/CorporatePage/JobAdList.tsx
@@ -10,6 +10,7 @@ interface JobAdListProps {
 }
 
 const List = styled.ul`
+  padding: 0;
   li {
     margin: 1rem 0;
     list-style: none;
diff --git a/src/views/GuildPage/GuildPageView.tsx b/src/views/GuildPage/GuildPageView.tsx
index c280c6a..929b42f 100644
--- a/src/views/GuildPage/GuildPageView.tsx
+++ b/src/views/GuildPage/GuildPageView.tsx
@@ -7,7 +7,7 @@ import { colors } from "@theme/colors";
 
 const Column = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
 
   a {
     color: inherit;
diff --git a/src/views/StudiesPage/StudiesPageView.tsx b/src/views/StudiesPage/StudiesPageView.tsx
index 2003dad..00a8134 100644
--- a/src/views/StudiesPage/StudiesPageView.tsx
+++ b/src/views/StudiesPage/StudiesPageView.tsx
@@ -6,6 +6,7 @@ import StudiesPageHero from "./StudiesPageHero";
 const TestimonialImage = styled.img`
   max-width: 500px;
   max-height: 500px;
+  width: 100%;
 `;
 
 const StudiesPageView: React.FC = () => (