fix: overflow corner cases

3f17c283 · xaralis · 1aecab2d · 3f17c283 · 3f17c283 · 3f17c283
Commit 3f17c283 authored 4 years ago by xaralis
--- 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.

--- 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>
  );

--- 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>