limit the minimum width of the speechbox so that it doesn't squash th…

…e speechbox arrow 🙂
UoaWDCC · Jul 29, 2023 · 8d37280 · 8d37280
1 parent 10fb2e9
commit 8d37280
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/frontend/src/components/SpeechboxArrow.js b/frontend/src/components/SpeechboxArrow.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Triangle from "components/Triangle";
 
-const SpeechTextboxArrow = React.memo(({ borderWidth }) => {
+const SpeechTextboxArrow = React.memo(({ borderWidth, setArrowWidth }) => {
   const arrowHeight = 25; // px
   const arrowWidth = 25; // px
 
@@ -43,6 +43,7 @@ const SpeechTextboxArrow = React.memo(({ borderWidth }) => {
 
   const borderTriangleWidth = calculateBorderTriangleWidth();
   const borderTriangleHeight = calculateBorderTriangleHeight();
+  setArrowWidth(borderTriangleWidth);
 
   return (
     <div

diff --git a/frontend/src/containers/pages/AuthoringTool/Components/SpeechTextComponent.js b/frontend/src/containers/pages/AuthoringTool/Components/SpeechTextComponent.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import SpeechTextboxArrow from "components/SpeechboxArrow";
 import { Typography } from "@material-ui/core";
 import useStyles from "./components.styles";
@@ -18,16 +18,24 @@ const borderWidth = 3.429; // px
 export default function SpeechTextComponent({ id, onClick, component }) {
   const { defaultComponentStyling, speechTextComponentStyles } =
     useStyles(component);
+  const [speechTextboxArrowWidth, setArrowWidth] = useState(null);
 
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
     <div
       className={defaultComponentStyling}
-      style={{ display: "flex", flexDirection: "column" }}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        minWidth: speechTextboxArrowWidth + 10, // speechbox slightly wider than arrow
+      }}
       onClick={onClick}
       id={id}
     >
-      <SpeechTextboxArrow borderWidth={borderWidth} />
+      <SpeechTextboxArrow
+        borderWidth={borderWidth}
+        setArrowWidth={setArrowWidth}
+      />
 
       <Typography
         style={{ borderWidth, flex: 1 }}