Bug 1072279 - Prevent unnecessary scrollbars in Loop conversation window. r=Standard8

browser/components/loop/content/shared/css/conversation.css

@@ -235,12 +235,12 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  min-height: 264px;
+  min-height: 230px;
 }
 
 .incoming-call-action-group {
   display: flex;
-  padding: 2.5em 0;
+  padding: 2.5em 0 0 0;
   width: 100%;
   justify-content: space-around;
 }
@@ -363,13 +363,16 @@
   padding: 14px;
 }
 
+.feedback p {
+  margin: 0px;
+}
+
 .feedback h3 {
   color: #666;
   font-size: 12px;
   font-weight: 700;
   text-align: center;
-  margin-bottom: 14px;
-  margin-top: 14px;
+  margin: 0 0 1em 0;
 }
 
 .feedback .faces {

browser/components/loop/ui/ui-showcase.js

@@ -149,14 +149,14 @@
           ), 
 
           Section({name: "IncomingCallView"}, 
-            Example({summary: "Default / incoming video call", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Default / incoming video call", dashed: "true", style: {width: "260px", height: "254px"}}, 
               React.DOM.div({className: "fx-embedded"}, 
                 IncomingCallView({model: mockConversationModel, 
                                   video: true})
               )
             ), 
 
-            Example({summary: "Default / incoming audio only call", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Default / incoming audio only call", dashed: "true", style: {width: "260px", height: "254px"}}, 
               React.DOM.div({className: "fx-embedded"}, 
                 IncomingCallView({model: mockConversationModel, 
                                   video: false})
@@ -165,7 +165,7 @@
           ), 
 
           Section({name: "IncomingCallView-ActiveState"}, 
-            Example({summary: "Default", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Default", dashed: "true", style: {width: "260px", height: "254px"}}, 
               React.DOM.div({className: "fx-embedded"}, 
                 IncomingCallView({model: mockConversationModel, 
                                    showDeclineMenu: true, 
@@ -319,13 +319,13 @@
               React.DOM.strong(null, "Note:"), " For the useable demo, you can access submitted data at ", 
               React.DOM.a({href: "https://input.allizom.org/"}, "input.allizom.org"), "."
             ), 
-            Example({summary: "Default (useable demo)", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Default (useable demo)", dashed: "true", style: {width: "260px"}}, 
               FeedbackView({feedbackApiClient: stageFeedbackApiClient})
             ), 
-            Example({summary: "Detailed form", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Detailed form", dashed: "true", style: {width: "260px"}}, 
               FeedbackView({feedbackApiClient: stageFeedbackApiClient, step: "form"})
             ), 
-            Example({summary: "Thank you!", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Thank you!", dashed: "true", style: {width: "260px"}}, 
               FeedbackView({feedbackApiClient: stageFeedbackApiClient, step: "finished"})
             )
           ), 

browser/components/loop/ui/ui-showcase.jsx

@@ -149,14 +149,14 @@
           </Section>
 
           <Section name="IncomingCallView">
-            <Example summary="Default / incoming video call" dashed="true" style={{width: "280px"}}>
+            <Example summary="Default / incoming video call" dashed="true" style={{width: "260px", height: "254px"}}>
               <div className="fx-embedded">
                 <IncomingCallView model={mockConversationModel}
                                   video={true} />
               </div>
             </Example>
 
-            <Example summary="Default / incoming audio only call" dashed="true" style={{width: "280px"}}>
+            <Example summary="Default / incoming audio only call" dashed="true" style={{width: "260px", height: "254px"}}>
               <div className="fx-embedded">
                 <IncomingCallView model={mockConversationModel}
                                   video={false} />
@@ -165,7 +165,7 @@
           </Section>
 
           <Section name="IncomingCallView-ActiveState">
-            <Example summary="Default" dashed="true" style={{width: "280px"}}>
+            <Example summary="Default" dashed="true" style={{width: "260px", height: "254px"}}>
               <div className="fx-embedded" >
                 <IncomingCallView  model={mockConversationModel}
                                    showDeclineMenu={true}
@@ -319,13 +319,13 @@
               <strong>Note:</strong> For the useable demo, you can access submitted data at&nbsp;
               <a href="https://input.allizom.org/">input.allizom.org</a>.
             </p>
-            <Example summary="Default (useable demo)" dashed="true" style={{width: "280px"}}>
+            <Example summary="Default (useable demo)" dashed="true" style={{width: "260px"}}>
               <FeedbackView feedbackApiClient={stageFeedbackApiClient} />
             </Example>
-            <Example summary="Detailed form" dashed="true" style={{width: "280px"}}>
+            <Example summary="Detailed form" dashed="true" style={{width: "260px"}}>
               <FeedbackView feedbackApiClient={stageFeedbackApiClient} step="form" />
             </Example>
-            <Example summary="Thank you!" dashed="true" style={{width: "280px"}}>
+            <Example summary="Thank you!" dashed="true" style={{width: "260px"}}>
               <FeedbackView feedbackApiClient={stageFeedbackApiClient} step="finished" />
             </Example>
           </Section>