more history UI updates. copy/use controls, change font, fix scroll area

src/app/clientsettings/clientsettings.tsx

@@ -168,7 +168,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const curTheme = GlobalModel.getTheme();
 
         return (
-            <MainView viewName="clientsettings" title="Client Settings" onClose={this.handleClose}>
+            <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
                 <div className="content">
                     <div className="settings-field">
                         <div className="settings-label">Term Font Size</div>

src/app/common/elements/mainview.tsx

@@ -10,17 +10,17 @@ import "./mainview.less";
 
 @mobxReact.observer
 class MainView extends React.Component<{
-    viewName: string;
     title: string;
     onClose: () => void;
     children: React.ReactNode;
+    className?: string;
 }> {
     render() {
         const sidebarModel = GlobalModel.mainSidebarModel;
         const maxWidthSubtractor = sidebarModel.getCollapsed() ? 0 : sidebarModel.getWidth();
         return (
             <div
-                className={cn("mainview", `${this.props.viewName}-view`)}
+                className={cn("mainview", this.props.className)}
                 style={{ maxWidth: `calc(100vw - ${maxWidthSubtractor}px)` }}
             >
                 <div className="header-container bottom-border">

src/app/connections/connections.tsx

@@ -131,7 +131,7 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
         let item: RemoteType = null;
 
         return (
-            <MainView viewName="connections" title="Connections" onClose={this.handleClose}>
+            <MainView className="connections-view" title="Connections" onClose={this.handleClose}>
                 <table
                     className="connections-table"
                     cellSpacing="0"

src/app/history/history.less

@@ -1,5 +1,6 @@
 .history-view {
     padding-bottom: 10px;
+    min-height: 0;
 
     .icon {
         width: 1.5em !important;
@@ -8,6 +9,14 @@
         fill: var(--app-text-color);
     }
 
+    .mainview-content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        padding: 10px 10px 0 10px;
+        min-height: 0;
+    }
+
     .history-checkbox {
         &.state-unchecked {
             width: 16px;
@@ -154,17 +163,22 @@
         margin-top: 10px;
         margin-left: 10px;
         align-items: center;
-        height: 32px;
+        height: 35px;
         flex-shrink: 0;
-        border-bottom: 2px solid #ccc;
 
         .is-hidden {
             display: none;
         }
 
         &.is-top {
+            border-bottom: 2px solid #ccc;
             border-top: 1px solid #333;
             padding-top: 4px;
+            padding-bottom: 4px;
+        }
+
+        &.is-bottom {
+            border-top: 2px solid #ccc;
         }
 
         .trash-icon {
@@ -251,6 +265,8 @@
         display: flex;
         flex-direction: column;
         width: calc(100% - 20px);
+        flex-grow: 1;
+        min-height: 200px;
 
         .row.active-history-item {
             display: flex;
@@ -303,6 +319,7 @@
             border-bottom: 1px solid var(--table-tr-border-bottom-color);
             align-items: center;
             color: var(--app-text-color);
+            font: var(--base-font);
 
             &.is-selected {
                 background-color: var(--table-tr-selected-bg-color);
@@ -328,7 +345,7 @@
             }
 
             .selectbox {
-                flex: 0 0 20px;
+                flex: 0 0 30px;
                 cursor: pointer;
             }
 
@@ -359,20 +376,40 @@
                 white-space: pre;
                 max-height: 70px;
                 min-width: 300px;
-                padding-top: 4px;
+                padding-top: 0;
-                padding-bottom: 4px;
+                padding-bottom: 0;
                 overflow-x: scroll;
                 position: relative;
 
-                .use-button {
+                .cmdstr-code {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: flex-end;
+                    padding-top: 4px;
+                    padding-bottom: 4px;
+                }
+
+                .actions-block {
+                    display: flex;
+                    flex-direction: row;
+
+                    .action-item:hover {
+                        color: var(--app-text-color);
+                        cursor: pointer;
+                    }
+
                     visibility: hidden;
                 }
 
-                &:hover .use-button {
+                .activate-item-spacer {
-                    visibility: visible;
+                    cursor: pointer;
                 }
             }
 
+            &:hover .cmdstr .actions-block {
+                visibility: visible;
+            }
+
             .downarrow {
                 flex: 0 0 32px;
                 justify-content: center;

src/app/history/history.tsx

@@ -153,16 +153,16 @@ class HistoryCmdStr extends React.Component<
                         <div>copied</div>
                     </div>
                 </If>
-                <div key="use" className="use-button hoverEffect" title="Use Command" onClick={this.handleUse}>
-                    <CheckIcon className="icon" />
-                </div>
                 <div key="code" className="code-div">
                     <code>{cmdstr}</code>
                 </div>
-                <div key="copy" className="copy-control hoverEffect">
+                <div key="copy" className="actions-block">
-                    <div className="inner-copy" onClick={this.handleCopy} title="copy">
+                    <div className="action-item" onClick={this.handleCopy} title="copy">
                         <CopyIcon className="icon" />
                     </div>
+                    <div key="use" className="action-item" title="Use Command" onClick={this.handleUse}>
+                        <CheckIcon className="icon" />
+                    </div>
                 </div>
             </div>
         );
@@ -447,7 +447,7 @@ class HistoryView extends React.Component<{}, {}> {
         let remoteId: string = null;
 
         return (
-            <MainView viewName="history" title="History" onClose={this.handleClose}>
+            <MainView className="history-view" title="History" onClose={this.handleClose}>
                 <div key="search" className="history-search">
                     <div className="main-search field">
                         <TextField
@@ -634,12 +634,14 @@ class HistoryView extends React.Component<{}, {}> {
                                         fontSize="normal"
                                         limitHeight={true}
                                     />
+                                    <div
+                                        className="flex-spacer activate-item-spacer"
+                                        onClick={() => this.activateItem(item.historyid)}
+                                    />
                                 </div>
-                                <div className="cell workspace text-standard">
+                                <div className="cell workspace">{formatSSName(snames, scrnames, item)}</div>
-                                    {formatSSName(snames, scrnames, item)}
+                                <div className="cell remote">{formatRemoteName(rnames, item.remote)}</div>
-                                </div>
+                                <div className="cell ts">{getHistoryViewTs(nowDate, item.ts)}</div>
-                                <div className="cell remote text-standard">{formatRemoteName(rnames, item.remote)}</div>
-                                <div className="cell ts text-standard">{getHistoryViewTs(nowDate, item.ts)}</div>
                                 <div className="cell downarrow" onClick={() => this.activateItem(item.historyid)}>
                                     <If condition={activeItemId != item.historyid}>
                                         <svg
@@ -685,7 +687,10 @@ class HistoryView extends React.Component<{}, {}> {
                         </For>
                     </div>
                 </div>
-                <div key="control2" className={cn("control-bar", { "is-hidden": items.length == 0 || !hasMore })}>
+                <div
+                    key="control2"
+                    className={cn("control-bar", "is-bottom", { "is-hidden": items.length == 0 || !hasMore })}
+                >
                     <div className="spacer" />
                     <div className="showing-text">
                         Showing {offset + 1}-{offset + items.length}