From 3967358531b6c911a88bba6163db7502133aab8a Mon Sep 17 00:00:00 2001
From: Will O'Beirne <wbobeirne@gmail.com>
Date: Mon, 4 Feb 2019 17:39:46 -0500
Subject: [PATCH] Minimum tab heights on proposals and profiles.

---
 frontend/client/components/Profile/index.tsx  | 132 +++++++++---------
 frontend/client/components/Profile/style.less |   4 +
 .../client/components/Proposal/index.less     |   4 +
 frontend/client/components/Proposal/index.tsx |  34 ++---
 4 files changed, 95 insertions(+), 79 deletions(-)

diff --git a/frontend/client/components/Profile/index.tsx b/frontend/client/components/Profile/index.tsx
index 93b80cc8..04eb5257 100644
--- a/frontend/client/components/Profile/index.tsx
+++ b/frontend/client/components/Profile/index.tsx
@@ -113,74 +113,80 @@ class Profile extends React.Component<Props, State> {
             render={() => <ProfileEdit user={user} />}
           />
         </Switch>
-        <LinkableTabs defaultActiveKey="pending">
-          {isAuthedUser && (
-            <Tabs.TabPane
-              tab={TabTitle('Pending', pendingProposals.length)}
-              key="pending"
-            >
+        <div className="Profile-tabs">
+          <LinkableTabs defaultActiveKey="pending">
+            {isAuthedUser && (
+              <Tabs.TabPane
+                tab={TabTitle('Pending', pendingProposals.length)}
+                key="pending"
+              >
+                <div>
+                  {nonePending && (
+                    <Placeholder
+                      title="No pending proposals"
+                      subtitle="You do not have any proposals awaiting approval."
+                    />
+                  )}
+                  <ProfilePendingList proposals={pendingProposals} />
+                </div>
+              </Tabs.TabPane>
+            )}
+            <Tabs.TabPane tab={TabTitle('Created', proposals.length)} key="created">
               <div>
-                {nonePending && (
-                  <Placeholder
-                    title="No pending proposals"
-                    subtitle="You do not have any proposals awaiting approval."
-                  />
+                {noneCreated && (
+                  <Placeholder subtitle="Has not created any proposals yet" />
                 )}
-                <ProfilePendingList proposals={pendingProposals} />
-              </div>
-            </Tabs.TabPane>
-          )}
-          <Tabs.TabPane tab={TabTitle('Created', proposals.length)} key="created">
-            <div>
-              {noneCreated && (
-                <Placeholder subtitle="Has not created any proposals yet" />
-              )}
-              {proposals.map(p => (
-                <ProfileProposal key={p.proposalId} proposal={p} />
-              ))}
-            </div>
-          </Tabs.TabPane>
-          <Tabs.TabPane tab={TabTitle('Funded', contributions.length)} key="funded">
-            <div>
-              {noneFunded && <Placeholder subtitle="Has not funded any proposals yet" />}
-              {contributions.map(c => (
-                <ProfileContribution
-                  key={c.id}
-                  userId={user.userid}
-                  contribution={c}
-                  showSendInstructions={this.openContributionModal}
-                />
-              ))}
-            </div>
-          </Tabs.TabPane>
-          <Tabs.TabPane tab={TabTitle('Comments', comments.length)} key="comments">
-            <div>
-              {noneCommented && <Placeholder subtitle="Has not made any comments yet" />}
-              {comments.map(c => (
-                <ProfileComment key={c.id} userName={user.displayName} comment={c} />
-              ))}
-            </div>
-          </Tabs.TabPane>
-          {isAuthedUser && (
-            <Tabs.TabPane
-              tab={TabTitle('Invites', invites.length)}
-              key="invites"
-              disabled={!user.hasFetchedInvites}
-            >
-              <div>
-                {noneInvites && (
-                  <Placeholder
-                    title="No invites here!"
-                    subtitle="You’ll be notified when you’ve been invited to join a proposal"
-                  />
-                )}
-                {invites.map(invite => (
-                  <ProfileInvite key={invite.id} userId={user.userid} invite={invite} />
+                {proposals.map(p => (
+                  <ProfileProposal key={p.proposalId} proposal={p} />
                 ))}
               </div>
             </Tabs.TabPane>
-          )}
-        </LinkableTabs>
+            <Tabs.TabPane tab={TabTitle('Funded', contributions.length)} key="funded">
+              <div>
+                {noneFunded && (
+                  <Placeholder subtitle="Has not funded any proposals yet" />
+                )}
+                {contributions.map(c => (
+                  <ProfileContribution
+                    key={c.id}
+                    userId={user.userid}
+                    contribution={c}
+                    showSendInstructions={this.openContributionModal}
+                  />
+                ))}
+              </div>
+            </Tabs.TabPane>
+            <Tabs.TabPane tab={TabTitle('Comments', comments.length)} key="comments">
+              <div>
+                {noneCommented && (
+                  <Placeholder subtitle="Has not made any comments yet" />
+                )}
+                {comments.map(c => (
+                  <ProfileComment key={c.id} userName={user.displayName} comment={c} />
+                ))}
+              </div>
+            </Tabs.TabPane>
+            {isAuthedUser && (
+              <Tabs.TabPane
+                tab={TabTitle('Invites', invites.length)}
+                key="invites"
+                disabled={!user.hasFetchedInvites}
+              >
+                <div>
+                  {noneInvites && (
+                    <Placeholder
+                      title="No invites here!"
+                      subtitle="You’ll be notified when you’ve been invited to join a proposal"
+                    />
+                  )}
+                  {invites.map(invite => (
+                    <ProfileInvite key={invite.id} userId={user.userid} invite={invite} />
+                  ))}
+                </div>
+              </Tabs.TabPane>
+            )}
+          </LinkableTabs>
+        </div>
 
         <ContributionModal
           isVisible={!!activeContribution}
diff --git a/frontend/client/components/Profile/style.less b/frontend/client/components/Profile/style.less
index b6a566c4..49e9add1 100644
--- a/frontend/client/components/Profile/style.less
+++ b/frontend/client/components/Profile/style.less
@@ -4,6 +4,10 @@
   max-width: 800px;
   margin: 0 auto;
 
+  &-tabs {
+    min-height: 400px;
+  }
+
   & .ant-tabs-nav .ant-tabs-tab {
     padding-right: 5px;
   }
diff --git a/frontend/client/components/Proposal/index.less b/frontend/client/components/Proposal/index.less
index 8ff81554..c533ec65 100644
--- a/frontend/client/components/Proposal/index.less
+++ b/frontend/client/components/Proposal/index.less
@@ -212,4 +212,8 @@
       }
     }
   }
+
+  &-bottom {
+    min-height: 400px;
+  }
 }
diff --git a/frontend/client/components/Proposal/index.tsx b/frontend/client/components/Proposal/index.tsx
index d16c9d87..1535fcea 100644
--- a/frontend/client/components/Proposal/index.tsx
+++ b/frontend/client/components/Proposal/index.tsx
@@ -243,22 +243,24 @@ export class ProposalDetail extends React.Component<Props, State> {
           </div>
         </div>
 
-        <LinkableTabs scrollToTabs defaultActiveKey="milestones">
-          <Tabs.TabPane tab="Milestones" key="milestones">
-            <div style={{ marginTop: '1.5rem', padding: '0 2rem' }}>
-              <Milestones proposal={proposal} />
-            </div>
-          </Tabs.TabPane>
-          <Tabs.TabPane tab="Discussion" key="discussions" disabled={!isLive}>
-            <CommentsTab proposalId={proposal.proposalId} />
-          </Tabs.TabPane>
-          <Tabs.TabPane tab="Updates" key="updates" disabled={!isLive}>
-            <UpdatesTab proposalId={proposal.proposalId} />
-          </Tabs.TabPane>
-          <Tabs.TabPane tab="Contributors" key="contributors" disabled={!isLive}>
-            <ContributorsTab proposalId={proposal.proposalId} />
-          </Tabs.TabPane>
-        </LinkableTabs>
+        <div className="Proposal-bottom">
+          <LinkableTabs scrollToTabs defaultActiveKey="milestones">
+            <Tabs.TabPane tab="Milestones" key="milestones">
+              <div style={{ marginTop: '1.5rem', padding: '0 2rem' }}>
+                <Milestones proposal={proposal} />
+              </div>
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="Discussion" key="discussions" disabled={!isLive}>
+              <CommentsTab proposalId={proposal.proposalId} />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="Updates" key="updates" disabled={!isLive}>
+              <UpdatesTab proposalId={proposal.proposalId} />
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="Contributors" key="contributors" disabled={!isLive}>
+              <ContributorsTab proposalId={proposal.proposalId} />
+            </Tabs.TabPane>
+          </LinkableTabs>
+        </div>
 
         {isTrustee && (
           <>