From 2a4d85430aec9186e08b624e3e9d75ecfbb6ff3c Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Sun, 11 Feb 2024 06:18:50 +0800
Subject: [PATCH] Fix term width in view connection detail modal (#274)

* fix term width

* add horizontal scroll to terminal when it overflows

* revert width of modal
---
 src/app/common/modals/viewremoteconndetail.less | 6 ++++--
 src/app/common/modals/viewremoteconndetail.tsx  | 8 +++-----
 src/models/remotes.ts                           | 9 +++------
 src/plugins/terminal/terminal.less              | 4 ++--
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/app/common/modals/viewremoteconndetail.less b/src/app/common/modals/viewremoteconndetail.less
index 2789c877..68b9fb3f 100644
--- a/src/app/common/modals/viewremoteconndetail.less
+++ b/src/app/common/modals/viewremoteconndetail.less
@@ -54,6 +54,8 @@
             }
 
             .remote-detail {
+                width: 100%;
+
                 .settings-field {
                     display: flex;
                     flex-direction: row;
@@ -91,8 +93,9 @@
                 }
 
                 .terminal-wrapper {
-                    width: 100%;
                     margin-top: 5px;
+                    overflow-x: auto;
+                    overflow-y: hidden;
 
                     .terminal-connectelem {
                         height: 163px !important; // Needed to override plugin height
@@ -111,7 +114,6 @@
 
                         .xterm-screen {
                             padding: 10px;
-                            width: 541px !important; // Needed to override plugin width
                         }
                     }
                 }
diff --git a/src/app/common/modals/viewremoteconndetail.tsx b/src/app/common/modals/viewremoteconndetail.tsx
index bd83dabe..933f293e 100644
--- a/src/app/common/modals/viewremoteconndetail.tsx
+++ b/src/app/common/modals/viewremoteconndetail.tsx
@@ -12,12 +12,10 @@ import * as T from "../../../types/types";
 import { Modal, Tooltip, Button, Status } from "../elements";
 import * as util from "../../../util/util";
 import * as textmeasure from "../../../util/textmeasure";
+import * as appconst from "../../appconst";
 
 import "./viewremoteconndetail.less";
 
-const RemotePtyRows = 9;
-const RemotePtyCols = 80;
-
 @mobxReact.observer
 class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
     termRef: React.RefObject<any> = React.createRef();
@@ -293,7 +291,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
         let model = this.model;
         let isTermFocused = this.model.remoteTermWrapFocus.get();
         let termFontSize = GlobalModel.termFontSize.get();
-        let termWidth = textmeasure.termWidthFromCols(RemotePtyCols, termFontSize);
+        let termWidth = textmeasure.termWidthFromCols(appconst.RemotePtyCols, termFontSize);
         let remoteAliasText = util.isBlank(remote.remotealias) ? "(none)" : remote.remotealias;
         let selectedRemoteStatus = this.getSelectedRemote().status;
 
@@ -371,7 +369,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
                                 ref={this.termRef}
                                 data-remoteid={remote.remoteid}
                                 style={{
-                                    height: textmeasure.termHeightFromRows(RemotePtyRows, termFontSize),
+                                    height: textmeasure.termHeightFromRows(appconst.RemotePtyRows, termFontSize),
                                     width: termWidth,
                                 }}
                             ></div>
diff --git a/src/models/remotes.ts b/src/models/remotes.ts
index f1e28f78..3ff4e2d1 100644
--- a/src/models/remotes.ts
+++ b/src/models/remotes.ts
@@ -12,9 +12,6 @@ import { GlobalCommandRunner } from "./global";
 import { Model } from "./model";
 import { getTermPtyData } from "../util/modelutil";
 
-const RemotePtyRows = 8; // also in main.tsx
-const RemotePtyCols = 80;
-
 class RemotesModel {
     globalModel: Model;
     selectedRemoteId: OV<string> = mobx.observable.box(null, {
@@ -180,14 +177,14 @@ class RemotesModel {
             return;
         }
         let termOpts = {
-            rows: RemotePtyRows,
-            cols: RemotePtyCols,
+            rows: appconst.RemotePtyRows,
+            cols: appconst.RemotePtyCols,
             flexrows: false,
             maxptysize: 64 * 1024,
         };
         let termWrap = new TermWrap(elem, {
             termContext: { remoteId: remoteId },
-            usedRows: RemotePtyRows,
+            usedRows: appconst.RemotePtyRows,
             termOpts: termOpts,
             winSize: null,
             keyHandler: (e, termWrap) => {
diff --git a/src/plugins/terminal/terminal.less b/src/plugins/terminal/terminal.less
index b653421f..9f9d63ae 100644
--- a/src/plugins/terminal/terminal.less
+++ b/src/plugins/terminal/terminal.less
@@ -3,10 +3,10 @@
 
 .terminal-wrapper {
     .xterm-viewport {
-        overflow-y: hidden;
+        overflow: hidden;
     }
     &:hover .xterm-viewport,
     &:focus-within .xterm-viewport {
-        overflow-y: auto;
+        overflow: auto;
     }
 }