Merge pull request #153 from grant-project/tabs-min-height

Minimum tab heights on proposals and profiles.

frontend/client/components/Profile/index.tsx

@@ -113,6 +113,7 @@ class Profile extends React.Component<Props, State> {
             render={() => <ProfileEdit user={user} />}
           />
         </Switch>
+        <div className="Profile-tabs">
           <LinkableTabs defaultActiveKey="pending">
             {isAuthedUser && (
               <Tabs.TabPane
@@ -142,7 +143,9 @@ class Profile extends React.Component<Props, State> {
             </Tabs.TabPane>
             <Tabs.TabPane tab={TabTitle('Funded', contributions.length)} key="funded">
               <div>
-              {noneFunded && <Placeholder subtitle="Has not funded any proposals yet" />}
+                {noneFunded && (
+                  <Placeholder subtitle="Has not funded any proposals yet" />
+                )}
                 {contributions.map(c => (
                   <ProfileContribution
                     key={c.id}
@@ -155,7 +158,9 @@ class Profile extends React.Component<Props, State> {
             </Tabs.TabPane>
             <Tabs.TabPane tab={TabTitle('Comments', comments.length)} key="comments">
               <div>
-              {noneCommented && <Placeholder subtitle="Has not made any comments yet" />}
+                {noneCommented && (
+                  <Placeholder subtitle="Has not made any comments yet" />
+                )}
                 {comments.map(c => (
                   <ProfileComment key={c.id} userName={user.displayName} comment={c} />
                 ))}
@@ -181,6 +186,7 @@ class Profile extends React.Component<Props, State> {
               </Tabs.TabPane>
             )}
           </LinkableTabs>
+        </div>
 
         <ContributionModal
           isVisible={!!activeContribution}

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

frontend/client/components/Proposal/index.less

@@ -212,4 +212,8 @@
       }
     }
   }
+
+  &-bottom {
+    min-height: 400px;
+  }
 }

frontend/client/components/Proposal/index.tsx

@@ -243,6 +243,7 @@ export class ProposalDetail extends React.Component<Props, State> {
           </div>
         </div>
 
+        <div className="Proposal-bottom">
           <LinkableTabs scrollToTabs defaultActiveKey="milestones">
             <Tabs.TabPane tab="Milestones" key="milestones">
               <div style={{ marginTop: '1.5rem', padding: '0 2rem' }}>
@@ -259,6 +260,7 @@ export class ProposalDetail extends React.Component<Props, State> {
               <ContributorsTab proposalId={proposal.proposalId} />
             </Tabs.TabPane>
           </LinkableTabs>
+        </div>
 
         {isTrustee && (
           <>