Fix sponsor page copy-paste and drop nested GetAQuote modal

- Guard card/overlay click handlers against text selections so drag-select
  no longer triggers navigation (copy-paste now works end-to-end).
- Drop the nested GetAQuote modal: convert it to a standalone page reached
  via a real <Link>, fixing the broken href and stacked-overlay UX.
- Preserve the ?category filter across modal open/close.
- Fix ProgressBar fill overlapping the rounded track ends (overflow hidden).
- Fix modal scrollbar overlapping the rounded corners (overflow hidden on
  dialog content, drop redundant inner border-radius).

Author: MMesch

src/components/about/styles.module.css

@@ -18,6 +18,7 @@
   box-shadow: var(--ifm-shadow-dialog);
   border-radius: 20px;
   z-index: 4000;
+  overflow: hidden;
 }
 
 .small_portrait_card {

src/components/fundable/FundableProjectCard.tsx

@@ -7,8 +7,12 @@ export default function FundableProjectCard({ project }) {
   const history = useHistory();
 
   function open() {
+    if (window.getSelection()?.toString()) return;
+    const category = new URLSearchParams(window.location.search).get("category");
+    const search = category ? `?category=${encodeURIComponent(category)}` : "";
     history.push({
       pathname: `/sponsor/${project.pageName}`,
+      search,
       state: { fromFundable: true, scrollY: window.scrollY },
     });
   }

src/components/fundable/GetAQuotePage.tsx

@@ -2,11 +2,10 @@
 import styles from "./styles.module.css";
 import GetAQuoteForm from "./GetAQuoteForm"
 import { LargeProjectCardContent } from "./LargeProjectCard";
-import { useHistory, useLocation } from "@docusaurus/router";
+import { useHistory } from "@docusaurus/router";
 import Layout from "@theme/Layout";
 import { Route } from 'react-router-dom';
 import { getCategoryFromProjectPageName } from ".";
-import { FundableContent as FundableProjects } from "@site/src/pages/sponsor";
 
 function GetAQuoteComponent({ project }) {
     return (
@@ -28,16 +27,13 @@ function GetAQuoteComponent({ project }) {
     )
 }
 export default function GetAQuotePage() {
-    const location = useLocation();
     const history = useHistory();
 
     const handleClose = () => {
-        history.push('/sponsor');
-
+        history.goBack();
     }
     return (
         <Layout>
-            <FundableProjects />
             <Route
                 path="/sponsor/:pageName/GetAQuote"
                 render={({ match }) => {
@@ -47,22 +43,17 @@ export default function GetAQuotePage() {
                     if (!project) return null;
 
                     return (
-                        <div className={styles.project_dialog_overlay} >
-                            <div
-                                className={styles.project_dialog_content}
-                                onClick={(e) => e.stopPropagation()}
-                            >
-                                <button
-                                    className="close-button"
-                                    style={{
-                                        position: "absolute",
-                                        top: "10px",
-                                        right: "10px",
-                                    }}
-                                    onClick={handleClose}
-                                />
-                                <GetAQuoteComponent project={project} />
-                            </div>
+                        <div className={styles.get_a_quote_page}>
+                            <button
+                                className="close-button"
+                                style={{
+                                    position: "absolute",
+                                    top: "10px",
+                                    right: "10px",
+                                }}
+                                onClick={handleClose}
+                            />
+                            <GetAQuoteComponent project={project} />
                         </div>
                     );
                 }}

src/components/fundable/LargeProjectCard.tsx

@@ -1,22 +1,10 @@
 import styles from "./styles.module.css";
 import React from "react";
 import LinkToGetAQuote from "./LinkToGetAQuote";
-import { useHistory, useLocation } from "@docusaurus/router";
 
 export function LargeProjectCardContent({ project }) {
-    const history = useHistory();
-    const location = useLocation();
-
-    function openDialog() {
-        const pageName = project.pageName;
-
-        history.push({
-            pathname: `/sponsor/${pageName}/GetAQuote`,
-            state: { from: location.pathname, scrollY: window.scrollY },
-        });
-    }
     return (
-        <div className={"container"} onClick={openDialog}>
+        <div className={"container"}>
             <div className={"row-padding-none"}>
                 <div className="col col--12">
                     <div className={styles.large_project_card_title}>{project.title}</div>

src/components/fundable/LargeProjectCardPage.tsx

@@ -8,6 +8,15 @@ import { FundableContent } from "@site/src/pages/sponsor";
 import styles from "@site/src/components/about/styles.module.css";
 import LargeProjectCard from './LargeProjectCard';
 
+function backToOverview(history, scrollY) {
+  const category = new URLSearchParams(window.location.search).get("category");
+  const search = category ? `?category=${encodeURIComponent(category)}` : "";
+  history.replace({ pathname: '/sponsor', search });
+  if (scrollY !== undefined) {
+    setTimeout(() => window.scrollTo({ top: scrollY, behavior: 'auto' }), 0);
+  }
+}
+
 export default function LargeProjectCardPage() {
   const location = useLocation();
   const history = useHistory();
@@ -18,26 +27,15 @@ export default function LargeProjectCardPage() {
     }
   }, []);
 
-  const handleOverlayClick = () => {
-    const scrollY = location.state?.scrollY;
-    setTimeout(() => {
-      if (scrollY !== undefined) {
-        window.scrollTo({ top: scrollY, behavior: 'auto' });
-      }
-    }, 0);
-    history.replace('/sponsor');
+  const handleOverlayClick = (e) => {
+    if (window.getSelection()?.toString()) return;
+    if (e.target !== e.currentTarget) return;
+    backToOverview(history, location.state?.scrollY);
   };
 
   const handleClose = () => {
-    const scrollY = location.state?.scrollY;
     if (location.state?.fromFundable) {
-      history.replace('/sponsor');
-
-      setTimeout(() => {
-        if (scrollY !== undefined) {
-          window.scrollTo({ top: scrollY, behavior: 'auto' });
-        }
-      }, 0);
+      backToOverview(history, location.state?.scrollY);
     } else {
       history.goBack();
     }

src/components/fundable/LinkToGetAQuote.tsx

@@ -6,7 +6,7 @@ export default function LinkToGetAQuote({ label, pageName }) {
         <div className="flex-full-centered">
             <Link
                 className={"link-to-button" + " " + styles.link_to_get_a_quote}
-                href={'/sponsor'}
+                to={`/sponsor/${pageName}/GetAQuote`}
             >
                 {label}
             </Link>

src/components/fundable/ProgressBar.tsx

@@ -9,14 +9,13 @@ export default function ProgressBar({ value = 0, color = '#4caf50' }) {
                 border: 'solid 0.5px',
                 height: '21px',
                 width: '190px',
+                overflow: 'hidden',
             }}>
 
                 <div style={{
                     width: `${value}%`,
                     background: color,
-                    border: 'solid 0.5px',
                     height: '100%',
-                    borderRadius: '16px',
                     transition: 'width 0.3s ease-in-out',
                 }} />
             </div>

src/components/fundable/styles.module.css

@@ -212,6 +212,13 @@
   justify-content: center;
 }
 
+.get_a_quote_page {
+  position: relative;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--ifm-spacing-3xl) var(--ifm-spacing-xl);
+}
+
 .form_label {
   font-size: 12px;
   color: var(--ifm-text-color);
@@ -378,7 +385,6 @@
   .large_project_card {
     width: 90vw;
     padding: var(--ifm-spacing-xl);
-    border-radius: 8px;
     padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
     overflow-y: auto;
     max-height: 95vh;
@@ -412,10 +418,7 @@
 
 
   .get_a_quote_dialog {
-    width: 90vw;
-    padding: 40px;
-    overflow-y: auto;
-    max-height: 95vh;
+    padding: var(--ifm-spacing-md);
   }
 
   .get_a_quote_text_col_desktop {
@@ -452,7 +455,6 @@
   .large_project_card {
     width: 80vw;
     padding: 40px;
-    border-radius: 8px;
     padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
     overflow-y: auto;
     max-height: 95vh;
@@ -481,10 +483,7 @@
   }
 
   .get_a_quote_dialog {
-    width: 80vw;
-    padding: 40px;
-    overflow-y: auto;
-    max-height: 95vh;
+    padding: var(--ifm-spacing-lg);
   }
 
   .get_a_quote_text_col_desktop {
@@ -522,7 +521,6 @@
   .large_project_card {
     width: 800px;
     padding: 40px;
-    border-radius: 8px;
     overflow-y: auto;
     max-height: 95vh;
   }
@@ -555,10 +553,7 @@
   }
 
   .get_a_quote_dialog {
-    width: 90vw;
-    padding: 40px;
-    overflow-y: auto;
-    max-height: 95vh;
+    padding: var(--ifm-spacing-xl);
   }
 
   .get_a_quote_form_col_mobile {