From 226ffe8c30afeb06ff6c1f405d395d17c319404d Mon Sep 17 00:00:00 2001
From: tomivm <tomivm98@gmail.com>
Date: Thu, 12 Jan 2023 16:16:38 -0300
Subject: [PATCH 1/2] Set the max and min-height for the Board output

---
 src/components/Board/Board.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Board/Board.css b/src/components/Board/Board.css
index 8dd6cc40a..d65365324 100644
--- a/src/components/Board/Board.css
+++ b/src/components/Board/Board.css
@@ -11,6 +11,8 @@
   right: 0;
   width: 100%;
   height: 112px;
+  max-height: 15%;
+  min-height: 70px;
   z-index: 1;
 }
 

From 85b2359b7405c0c0756c1c0b81c74d30ae0de66b Mon Sep 17 00:00:00 2001
From: tomivm <tomivm98@gmail.com>
Date: Thu, 12 Jan 2023 16:20:27 -0300
Subject: [PATCH 2/2] Change alignment of the cancel button and liveMode label
 if is necessary

---
 .../Output/SymbolOutput/SymbolOutput.css      |   7 ++
 .../Board/Output/SymbolOutput/SymbolOutput.js | 107 +++++++++---------
 2 files changed, 62 insertions(+), 52 deletions(-)

diff --git a/src/components/Board/Output/SymbolOutput/SymbolOutput.css b/src/components/Board/Output/SymbolOutput/SymbolOutput.css
index abcf19112..4a00ecedd 100644
--- a/src/components/Board/Output/SymbolOutput/SymbolOutput.css
+++ b/src/components/Board/Output/SymbolOutput/SymbolOutput.css
@@ -54,6 +54,13 @@
   justify-content: center;
 }
 
+@media (max-height: 696px) {
+  .SymbolOutput__right__btns {
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+}
+
 .SymbolOutput__right__btns__lg {
   display: flex;
   flex-direction: row-reverse;
diff --git a/src/components/Board/Output/SymbolOutput/SymbolOutput.js b/src/components/Board/Output/SymbolOutput/SymbolOutput.js
index 38e78355d..becba2747 100644
--- a/src/components/Board/Output/SymbolOutput/SymbolOutput.js
+++ b/src/components/Board/Output/SymbolOutput/SymbolOutput.js
@@ -123,60 +123,63 @@ class SymbolOutput extends PureComponent {
             </div>
           ))}
         </Scroll>
-        {navigationSettings.shareShowActive && (
-          <PhraseShare
-            label={intl.formatMessage(messages.share)}
-            intl={this.props.intl}
-            onShareClick={this.onShareClick}
-            onShareClose={this.onShareClose}
-            publishBoard={this.publishBoard}
-            onCopyPhrase={onCopyClick}
-            open={this.state.openPhraseShareDialog}
-            phrase={this.props.phrase}
-            style={copyButtonStyle}
-            hidden={!symbols.length}
-            increaseOutputButtons={increaseOutputButtons}
-          />
-        )}
-        {!navigationSettings.removeOutputActive && (
-          <BackspaceButton
-            color="inherit"
-            onClick={onBackspaceClick}
-            style={backspaceButtonStyle}
-            hidden={navigationSettings.removeOutputActive}
-            increaseOutputButtons={increaseOutputButtons}
-          />
-        )}
-        <div
-          className={
-            increaseOutputButtons
-              ? 'SymbolOutput__right__btns__lg'
-              : 'SymbolOutput__right__btns'
-          }
-        >
-          {navigationSettings.liveMode && (
-            <FormControlLabel
-              value="bottom"
-              className={increaseOutputButtons ? 'Live__switch_lg' : null}
-              control={
-                <Switch
-                  size="small"
-                  checked={isLiveMode}
-                  color="primary"
-                  onChange={onSwitchLiveMode}
-                />
-              }
-              label={intl.formatMessage(messages.live)}
-              labelPlacement="bottom"
+        <div style={{ display: 'flex' }}>
+          {navigationSettings.shareShowActive && (
+            <PhraseShare
+              label={intl.formatMessage(messages.share)}
+              intl={this.props.intl}
+              onShareClick={this.onShareClick}
+              onShareClose={this.onShareClose}
+              publishBoard={this.publishBoard}
+              onCopyPhrase={onCopyClick}
+              open={this.state.openPhraseShareDialog}
+              phrase={this.props.phrase}
+              style={copyButtonStyle}
+              hidden={!symbols.length}
+              increaseOutputButtons={increaseOutputButtons}
+            />
+          )}
+
+          {!navigationSettings.removeOutputActive && (
+            <BackspaceButton
+              color="inherit"
+              onClick={onBackspaceClick}
+              style={backspaceButtonStyle}
+              hidden={navigationSettings.removeOutputActive}
+              increaseOutputButtons={increaseOutputButtons}
             />
           )}
-          <ClearButton
-            color="inherit"
-            onClick={onClearClick}
-            style={clearButtonStyle}
-            hidden={!symbols.length}
-            increaseOutputButtons={increaseOutputButtons}
-          />
+          <div
+            className={
+              increaseOutputButtons
+                ? 'SymbolOutput__right__btns__lg'
+                : 'SymbolOutput__right__btns'
+            }
+          >
+            {navigationSettings.liveMode && (
+              <FormControlLabel
+                value="bottom"
+                className={increaseOutputButtons ? 'Live__switch_lg' : null}
+                control={
+                  <Switch
+                    size="small"
+                    checked={isLiveMode}
+                    color="primary"
+                    onChange={onSwitchLiveMode}
+                  />
+                }
+                label={intl.formatMessage(messages.live)}
+                labelPlacement="bottom"
+              />
+            )}
+            <ClearButton
+              color="inherit"
+              onClick={onClearClick}
+              style={clearButtonStyle}
+              hidden={!symbols.length}
+              increaseOutputButtons={increaseOutputButtons}
+            />
+          </div>
         </div>
       </div>
     );