Skip to content
Snippets Groups Projects
Commit 3f17c283 authored by xaralis's avatar xaralis
Browse files

fix: overflow corner cases

parent 1aecab2d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/index.html
+ 3
− 3
View file @ 3f17c283
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<meta name="msapplication-square150x150logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-150x150.png"> <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-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="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 name="theme-color" content="#000000" />
<meta property="og:url" content="https://cf2021.pirati.cz/" /> <meta property="og:url" content="https://cf2021.pirati.cz/" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
...@@ -39,9 +39,9 @@ ...@@ -39,9 +39,9 @@
<link rel="stylesheet" href="%REACT_APP_STYLEGUIDE_URL%/css/styles.css" /> <link rel="stylesheet" href="%REACT_APP_STYLEGUIDE_URL%/css/styles.css" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script> <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
</head> </head>
<body class="h-screen"> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
......
src/components/posts/Post.jsx
+ 6
− 8
View file @ 3f17c283
...@@ -201,7 +201,7 @@ const Post = ({ ...@@ -201,7 +201,7 @@ const Post = ({
className="w-8 h-8 lg:w-14 lg:h-14 mr-3 rounded object-cover" className="w-8 h-8 lg:w-14 lg:h-14 mr-3 rounded object-cover"
alt={author.name} alt={author.name}
/> />
<div className="flex-1 w-full"> <div className="flex-1 overflow-hidden">
<div className="mb-1"> <div className="mb-1">
<div className="flex justify-between items-start xl:items-center"> <div className="flex justify-between items-start xl:items-center">
<div className="flex flex-col xl:flex-row xl:items-center"> <div className="flex flex-col xl:flex-row xl:items-center">
...@@ -248,7 +248,7 @@ const Post = ({ ...@@ -248,7 +248,7 @@ const Post = ({
supportThreshold={supportThreshold} supportThreshold={supportThreshold}
/> />
{showActions && ( {showActions && (
<DropdownMenu right className="pl-4"> <DropdownMenu right className="pl-4 static">
{showAnnounceAction && ( {showAnnounceAction && (
<DropdownMenuItem <DropdownMenuItem
onClick={onAnnounceProcedureProposal} onClick={onAnnounceProcedureProposal}
...@@ -327,12 +327,10 @@ const Post = ({ ...@@ -327,12 +327,10 @@ const Post = ({
<div className="flex lg:hidden flex-row flex-wrap my-2 space-x-2"> <div className="flex lg:hidden flex-row flex-wrap my-2 space-x-2">
{labels} {labels}
</div> </div>
<div className="overflow-hidden"> <div
<div className="text-sm lg:text-base text-black leading-normal content-block overflow-x-scroll overflow-y-hidden mt-1"
className="text-sm lg:text-base text-black leading-normal content-block overflow-x-scroll overflow-y-hidden" dangerouslySetInnerHTML={htmlContent}
dangerouslySetInnerHTML={htmlContent} ></div>
></div>
</div>
</div> </div>
</div> </div>
); );
......
src/pages/Home.jsx
+ 12
− 3
View file @ 3f17c283
...@@ -220,7 +220,7 @@ const Home = () => { ...@@ -220,7 +220,7 @@ const Home = () => {
onClick={showTutorial} onClick={showTutorial}
/> />
{displayActions && ( {displayActions && (
<DropdownMenu right triggerSize="lg"> <DropdownMenu right triggerSize="lg" className="z-20">
<DropdownMenuItem <DropdownMenuItem
onClick={() => setShowProgramEditModal(true)} onClick={() => setShowProgramEditModal(true)}
icon="ico--pencil" icon="ico--pencil"
...@@ -258,7 +258,11 @@ const Home = () => { ...@@ -258,7 +258,11 @@ const Home = () => {
</div> </div>
</div> </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"> <div className="container-padding--zero md:container-padding--auto">
{streamUrl && ( {streamUrl && (
<div className="iframe-container joyride-player"> <div className="iframe-container joyride-player">
...@@ -296,7 +300,12 @@ const Home = () => { ...@@ -296,7 +300,12 @@ const Home = () => {
</div> </div>
</section> </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"> <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"> <h2 className="head-heavy-xs md:head-heavy-sm whitespace-no-wrap">
<span>Příspěvky v rozpravě</span> <span>Příspěvky v rozpravě</span>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft