From 3f17c2835c3fc4f6864221468979ca06777696d9 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Thu, 7 Jan 2021 17:48:49 +0100
Subject: [PATCH] fix: overflow corner cases
---
public/index.html | 6 +++---
src/components/posts/Post.jsx | 14 ++++++--------
src/pages/Home.jsx | 15 ++++++++++++---
3 files changed, 21 insertions(+), 14 deletions(-)
diff --git a/public/index.html b/public/index.html
index 67c161f..475bf23 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,7 @@
<meta name="msapplication-square150x150logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-310x150.png">
<meta name="msapplication-square310x310logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-310x310.png">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<meta property="og:url" content="https://cf2021.pirati.cz/" />
<meta property="og:type" content="website" />
@@ -39,9 +39,9 @@
<link rel="stylesheet" href="%REACT_APP_STYLEGUIDE_URL%/css/styles.css" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
</head>
- <body class="h-screen">
+ <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
- <div id="root" class="h-screen h-full w-full"></div>
+ <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
diff --git a/src/components/posts/Post.jsx b/src/components/posts/Post.jsx
index 6c996cb..5467934 100644
--- a/src/components/posts/Post.jsx
+++ b/src/components/posts/Post.jsx
@@ -201,7 +201,7 @@ const Post = ({
className="w-8 h-8 lg:w-14 lg:h-14 mr-3 rounded object-cover"
alt={author.name}
/>
- <div className="flex-1 w-full">
+ <div className="flex-1 overflow-hidden">
<div className="mb-1">
<div className="flex justify-between items-start xl:items-center">
<div className="flex flex-col xl:flex-row xl:items-center">
@@ -248,7 +248,7 @@ const Post = ({
supportThreshold={supportThreshold}
/>
{showActions && (
- <DropdownMenu right className="pl-4">
+ <DropdownMenu right className="pl-4 static">
{showAnnounceAction && (
<DropdownMenuItem
onClick={onAnnounceProcedureProposal}
@@ -327,12 +327,10 @@ const Post = ({
<div className="flex lg:hidden flex-row flex-wrap my-2 space-x-2">
{labels}
</div>
- <div className="overflow-hidden">
- <div
- className="text-sm lg:text-base text-black leading-normal content-block overflow-x-scroll overflow-y-hidden"
- dangerouslySetInnerHTML={htmlContent}
- ></div>
- </div>
+ <div
+ className="text-sm lg:text-base text-black leading-normal content-block overflow-x-scroll overflow-y-hidden mt-1"
+ dangerouslySetInnerHTML={htmlContent}
+ ></div>
</div>
</div>
);
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 3722835..03047fb 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -220,7 +220,7 @@ const Home = () => {
onClick={showTutorial}
/>
{displayActions && (
- <DropdownMenu right triggerSize="lg">
+ <DropdownMenu right triggerSize="lg" className="z-20">
<DropdownMenuItem
onClick={() => setShowProgramEditModal(true)}
icon="ico--pencil"
@@ -258,7 +258,11 @@ const Home = () => {
</div>
</div>
</div>
- <section className="cf2021__video">
+ <section
+ className="cf2021__video"
+ // This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
+ style={{ maxWidth: "calc(100vw - 2rem)" }}
+ >
<div className="container-padding--zero md:container-padding--auto">
{streamUrl && (
<div className="iframe-container joyride-player">
@@ -296,7 +300,12 @@ const Home = () => {
</div>
</section>
- <section className="cf2021__posts joyride-posts">
+ {/* Relative is for fixing the dropdowns on the right which are detached from their immediate container. */}
+ <section
+ className="cf2021__posts relative joyride-posts"
+ // This prevents overflowing on very long lines without spaces on mobile, 2rem compensates container-padding--zero.
+ style={{ maxWidth: "calc(100vw - 2rem)" }}
+ >
<div className="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
<h2 className="head-heavy-xs md:head-heavy-sm whitespace-no-wrap">
<span>Příspěvky v rozpravě</span>
--
GitLab