Make "Reply" PDA messenger button clickable without scrolling (#17678)

* Shrink pda messenger height to accomodate for Reply button

* Make PDA navigation buttons opaque.

tgui/packages/tgui/interfaces/PDA.js

@@ -124,7 +124,7 @@ const PDAFooter = (props, context) => {
   } = data;
 
   return (
-    <Box className="PDA__footer">
+    <Box className="PDA__footer" backgroundColor="#1b1b1b">
       <Flex>
         <Flex.Item basis="33%">
           <Button

tgui/packages/tgui/interfaces/pda/pda_messenger.js

@@ -45,7 +45,7 @@ export const ActiveConversation = (props, context) => {
             tooltipPosition="bottom-left"
             onClick={() => setClipboardMode(!clipboardMode)} />
         }
-        height="450px"
+        height="415px"
         stretchContents>
         <Section height="97%" overflowY="auto">
           {filter(im => im.target === active_convo)(messages).map((im, i) => (
@@ -105,7 +105,7 @@ export const ActiveConversation = (props, context) => {
             tooltipPosition="bottom-left"
             onClick={() => setClipboardMode(!clipboardMode)} />
         }
-        height="450px"
+        height="415px"
         stretchContents>
         <Section style={{
           "height": "97%",

tgui/packages/tgui/styles/interfaces/PDA.scss

@@ -3,13 +3,12 @@
   bottom: 0%;
   left: 0%;
   right: 0%;
-  height: 35px;
-  background-color: "#1b1b1b";
+  height: 30px;
 }
 
 .PDA__footer__button {
   text-align: center;
-  margin-bottom: 0px;
-  margin-top: 7px;
-  font-size: 25px;
+  padding-top: 4px;
+  padding-bottom: 2px;
+  font-size: 24px;
 }