feat: 3-column proposal view on 1440 or higher res

src/components/Layout/Desktop1440.tsx

@@ -0,0 +1,22 @@
+import { useMediaQuery } from 'react-responsive'
+
+/**
+ * Media hook to determine if we're going to be rendering in a desktop environment with big screens.
+ */
+const useDesktop1440MediaQuery = (): boolean => useMediaQuery({ minWidth: 1440 })
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const Desktop1440 = ({ children }) => {
+  const isDesktop1440 = useDesktop1440MediaQuery()
+  return isDesktop1440 ? children : null
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const NotDesktop1440 = ({ children }) => {
+  const isDesktop1440 = useDesktop1440MediaQuery()
+  return isDesktop1440 ? null : children
+}
+
+export { Desktop1440, NotDesktop1440 }

src/components/Proposal/ProposalSidebar.tsx

@@ -12,6 +12,7 @@ import { isProposalStatusWithUpdates } from '../../entities/Updates/utils'
 import { SelectedVoteChoice, Vote } from '../../entities/Votes/types'
 import { calculateResult } from '../../entities/Votes/utils'
 import { ProposalPageState } from '../../pages/proposal'
+import { NotDesktop1440 } from '../Layout/Desktop1440'
 import CalendarAlertModal from '../Modal/CalendarAlertModal'
 
 import CalendarAlertButton from './View/CalendarAlertButton'
@@ -162,7 +163,11 @@ export default function ProposalSidebar({
           disabled={isCalendarButtonDisabled}
           onClick={() => setIsCalendarModalOpenWithTracking(true)}
         />
-        {proposal && <ProposalDetailSection proposal={proposal} />}
+        {proposal && (
+          <NotDesktop1440>
+            <ProposalDetailSection proposal={proposal} />
+          </NotDesktop1440>
+        )}
         {proposal && <ProposalActions proposal={proposal} deleting={deleting} updatePageState={updatePageState} />}
         {proposal && (
           <CalendarAlertModal

src/components/Proposal/View/DetailsSection.css

@@ -11,6 +11,12 @@
   border: none;
 }
 
+.DetailsSection__StickyBottom {
+  position: sticky !important;
+  bottom: 10px !important;
+  padding: 0 1em 0 1em;
+}
+
 .DetailsSection--with-shadow {
   box-shadow: 0px 0px 10px rgba(115, 110, 125, 0.15);
 }

src/components/Proposal/View/ProposalDetailSection.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import classNames from 'classnames'
+
 import { ProposalAttributes, ProposalType } from '../../../entities/Proposal/types'
 import { snapshotProposalUrl } from '../../../entities/Proposal/utils'
 import useCoAuthorsByProposal from '../../../hooks/useCoAuthorsByProposal'
@@ -16,16 +18,17 @@ import SidebarHeaderLabel from './SidebarHeaderLabel'
 
 interface Props {
   proposal: ProposalAttributes
+  className?: string
 }
 
 const formatDate = (date: Date) => Time.from(date).format('MMM DD, YYYY HH:mm')
 
-export default function ProposalDetailSection({ proposal }: Props) {
+export default function ProposalDetailSection({ proposal, className }: Props) {
   const t = useFormatMessage()
   const coAuthors = useCoAuthorsByProposal(proposal)
 
   return (
-    <div className="DetailsSection DetailsSection--no-border">
+    <div className={classNames('DetailsSection', 'DetailsSection--no-border', className)}>
       <div className="DetailsSection__Content">
         <SidebarHeaderLabel>{t('page.proposal_detail.details_label')}</SidebarHeaderLabel>
         <div className="DetailsSection__Flex">

src/pages/proposal.css

@@ -9,6 +9,13 @@
   padding-right: 0;
 }
 
+.ProposalDetail__Left {
+  display: flex;
+  width: 284px;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
 @media (min-width: 769px) {
   .ProposalDetailPage {
     flex-direction: row !important;
@@ -25,6 +32,12 @@
   }
 }
 
+@media (min-width: 1440px) {
+  .ProposalDetailPage__Description {
+    max-width: calc(100% - 284px - 284px);
+  }
+}
+
 @media (max-width: 767px) {
   .SignIn.center .ui.primary.button {
     display: none;

src/pages/proposal.tsx

@@ -16,6 +16,7 @@ import { SnapshotApi } from '../clients/SnapshotApi'
 import ProposalVPChart from '../components/Charts/ProposalVPChart'
 import WiderContainer from '../components/Common/WiderContainer'
 import FloatingBar from '../components/FloatingBar/FloatingBar'
+import { Desktop1440 } from '../components/Layout/Desktop1440'
 import MaintenanceLayout from '../components/Layout/MaintenanceLayout'
 import Navigation, { NavigationTab } from '../components/Layout/Navigation'
 import BidSubmittedModal from '../components/Modal/BidSubmittedModal'
@@ -41,6 +42,7 @@ import BidProposalView from '../components/Proposal/View/Categories/BidProposalV
 import GrantProposalView from '../components/Proposal/View/Categories/GrantProposalView'
 import CompetingBiddingAndTendering from '../components/Proposal/View/CompetingBiddingAndTendering'
 import GovernanceProcess from '../components/Proposal/View/GovernanceProcess'
+import ProposalDetailSection from '../components/Proposal/View/ProposalDetailSection'
 import ProposalImagesPreview from '../components/Proposal/View/ProposalImagesPreview'
 import ProposalMarkdown from '../components/Proposal/View/ProposalMarkdown'
 import { VOTES_VP_THRESHOLD } from '../constants'
@@ -381,6 +383,11 @@ export default function ProposalPage() {
       <Navigation activeTab={NavigationTab.Proposals} />
       <WiderContainer className={'ProposalDetailPage'}>
         <ProposalHero proposal={proposal} />
+        <Desktop1440>
+          <div className={'ProposalDetail__Left'}>
+            {proposal && <ProposalDetailSection proposal={proposal} className={'DetailsSection__StickyBottom'} />}
+          </div>
+        </Desktop1440>
         <div className="ProposalDetailPage__Description">
           <Loader active={isLoadingProposal} />
           {showProposalBudget && <ProposalBudget proposal={proposal} budget={budgetWithContestants} />}