@electerm/electerm-react 5.0.7 → 5.0.8

package/client/components/common/logo-elem.jsx

@@ -9,7 +9,7 @@ import './logo.styl'
 
 export default function LogoElem () {
   return (
-    <h1 className='mg3y font50'>
+    <h1 className='logo-elem mg3y font50'>
       <span className='iblock pd3 morph-shape mg1l mg1r'>
         <img src={logoPath2} className='iblock mwm-100 mg1l mg1r logo-filter logo-img' />
       </span>

package/client/components/common/logo.styl

@@ -3,8 +3,14 @@
 .logo-img-small
   height 28px
   border-radius 28px
-@media (max-width: 500px)
+// the h1 vertical margin so the logo stops dominating the no-session panel.
+.is-mobile
+  .logo-elem
+    margin-top 8px
+    margin-bottom 8px
+  .morph-shape
+    padding 6px
   .logo-img
-    height 40px
+    height 32px
   .logo-img-small
     height 20px

package/client/components/footer/cmd-history.jsx

@@ -111,13 +111,19 @@ export default auto(function CmdHistory (props) {
     }
     return (
       <div className='cmd-history-header pd2b'>
-        <Switch
-          checkedChildren={e('sortByFrequency')}
-          unCheckedChildren={e('sortByFrequency')}
-          checked={sortByFrequency}
-          onChange={handleSortByFrequencyChange}
-          size='small'
-        />
+        <div className='cmd-history-sort'>
+          <Switch
+            checked={sortByFrequency}
+            onChange={handleSortByFrequencyChange}
+            size='small'
+          />
+          <span
+            className='cmd-history-sort-label pointer'
+            onClick={() => handleSortByFrequencyChange(!sortByFrequency)}
+          >
+            {e('sortByFrequency')}
+          </span>
+        </div>
         <UnorderedListOutlined
           className='cmd-history-clear-icon pointer clear-ai-icon icon-hover'
           title={e('clear')}

package/client/components/footer/cmd-history.styl

@@ -17,6 +17,14 @@
   justify-content space-between
   padding-bottom 8px
 
+.cmd-history-sort
+  display flex
+  align-items center
+  gap 6px
+
+.cmd-history-sort-label
+  user-select none
+
 .cmd-history-clear-icon
   font-size 14px
   padding 4px

package/client/components/quick-commands/quick-commands-box.jsx

@@ -2,7 +2,7 @@
  * quick commands footer selection wrap
  */
 
-import { useState, useRef } from 'react'
+import { useState } from 'react'
 import { quickCommandLabelsLsKey, pinnedQuickCommandBarKey } from '../../common/constants'
 import { sortBy } from 'lodash-es'
 import { Button, Input, Select, Space, Flex } from 'antd'
@@ -25,21 +25,6 @@ const { Option } = Select
 export default function QuickCommandsFooterBox (props) {
   const [keyword, setKeyword] = useState('')
   const [label, setLabel] = useState(ls.getItem(quickCommandLabelsLsKey, ''))
-  const timer = useRef(null)
-
-  function handleMouseLeave () {
-    timer.current = setTimeout(() => {
-      toggle(false)
-    }, 500)
-  }
-
-  function handleMouseEnter () {
-    clearTimeout(timer.current)
-  }
-
-  function toggle (openQuickCommandBar) {
-    window.store.openQuickCommandBar = openQuickCommandBar
-  }
 
   function handleTogglePinned () {
     const current = !window.store.pinnedQuickCommandBar
@@ -209,9 +194,7 @@ export default function QuickCommandsFooterBox (props) {
     className: 'qm-wrap-tooltip',
     style: {
       left: w
-    },
-    onMouseLeave: handleMouseLeave,
-    onMouseEnter: handleMouseEnter
+    }
   }
   return (
     <div

package/client/components/quick-commands/quick-commands-select.jsx

@@ -1,5 +1,10 @@
 /**
  * quick commands footer selection
+ *
+ * Click to toggle the quick-command bar. Click-based so it works identically
+ * on touch (mobile) and mouse (desktop) — the old hover-to-open model was
+ * unreliable on Android, where a tap synthesizes mouseleave and cancels the
+ * open timer.
  */
 
 import { PureComponent } from 'react'
@@ -7,33 +12,18 @@ import { Button } from 'antd'
 import './qm.styl'
 
 export default class QuickCommandsFooter extends PureComponent {
-  componentWillUnmount () {
-    clearTimeout(this.timer)
-    this.timer = null
-  }
-
-  handleOpen = () => {
-    this.timer = setTimeout(this.act, 500)
-  }
-
-  act = () => {
-    window.store.openQuickCommandBar = true
-  }
-
-  handleMouseLeave = () => {
-    clearTimeout(this.timer)
+  handleClick = () => {
+    const { store } = window
+    store.openQuickCommandBar = !store.openQuickCommandBar
   }
 
   render () {
     return (
-      <div
-        className='fleft relative quick-command-trigger-wrap'
-        onMouseEnter={this.handleOpen}
-        onMouseLeave={this.handleMouseLeave}
-      >
+      <div className='fleft relative quick-command-trigger-wrap'>
         <Button
           size='small'
           type='text'
+          onClick={this.handleClick}
         >
           Q
         </Button>

package/client/components/sidebar/history.jsx

@@ -44,22 +44,25 @@ export default auto(function HistoryPanel (props) {
     }
     return (
       <div className='history-header pd2x pd2b'>
-        <Switch
-          {...switchProps}
-        />
+        <div className='history-sort'>
+          <Switch
+            checked={sortByFrequency}
+            onChange={handleSortByFrequencyChange}
+            size='small'
+          />
+          <span
+            className='history-sort-label pointer'
+            onClick={() => handleSortByFrequencyChange(!sortByFrequency)}
+          >
+            {e('sortByFrequency')}
+          </span>
+        </div>
         <UnorderedListOutlined
           {...clearIconProps}
         />
       </div>
     )
   }
-  const switchProps = {
-    checkedChildren: e('sortByFrequency'),
-    unCheckedChildren: e('sortByFrequency'),
-    checked: sortByFrequency,
-    onChange: handleSortByFrequencyChange,
-    size: 'small'
-  }
   const clearIconProps = {
     className: 'history-clear-icon pointer clear-ai-icon icon-hover',
     title: window.translate('clear'),

package/client/components/sidebar/sidebar.styl

@@ -57,6 +57,12 @@
     top 0
     z-index 10
     background var(--main)
+    .history-sort
+      display flex
+      align-items center
+      gap 6px
+    .history-sort-label
+      user-select none
     .history-clear-icon
       margin-left auto
       margin-right 0

package/client/components/tabs/no-session.jsx

@@ -51,7 +51,7 @@ export default function NoSessionPanel ({ height, onNewTab, onNewSsh, batch }) {
         )}
         <QuickConnect batch={batch} />
       </div>
-      <div className='pd3'>
+      <div className='no-session-logo'>
         <LogoElem />
       </div>
       <div className='no-session-history' onClick={handleClick}>

package/client/components/tabs/no-session.styl

@@ -1,28 +1,51 @@
 .no-sessions
   background var(--main)
   text-align center
-  padding 50px 0
+  // stack buttons / logo / history; the history flexes to fill the remaining
+  // height, so the layout adapts to logo size and button wrapping without any
+  // fixed pixel offsets.
+  display flex
+  flex-direction column
   position absolute
   top 36px
   left 0
   right 0
   bottom 0
+  padding 50px 0
   z-index 11
 .no-session-btns
+  flex-shrink 0
   display flex
   flex-wrap wrap
   justify-content center
   align-items center
   gap 8px
   padding-bottom 8px
+.no-session-logo
+  flex-shrink 0
+  padding 32px 0
 .no-session-history
-  position absolute
-  top 320px
-  bottom 80px
-  left 0
-  right 0
+  flex 1
+  min-height 0
+  display flex
+  flex-direction column
+  overflow hidden
   .sidebar-panel-history
-    overflow-y auto
+    // override the global sidebar absolute positioning (top:112px) so the
+    // history fills this flex item instead.
+    position static
+    flex 1
+    min-height 0
     .pd2x
       width 400px
-      margin 0 auto
+      margin 0 auto
+.is-mobile
+  .no-sessions
+    padding 20px 0
+  .no-session-logo
+    padding 8px 0
+  .no-session-history
+    .sidebar-panel-history
+      .pd2x
+        width auto
+        max-width 400px

package/client/css/mobile.styl

@@ -178,12 +178,21 @@
 
 // ---------------------------------------------------------------------------
 // Touch-primary devices only (feature-detected via pointer media query, not
-// UA sniffing or viewport width). iOS Safari and Android Chrome auto-zoom the
-// page when focusing an input with font-size < 16px, and never zoom back out
-// on blur, leaving the page stuck zoomed. Desktop browsers (even with
-// touchscreens or narrow windows) report pointer: fine and never force-zoom,
-// so this never matches them. Force 16px on all focusable form fields (antd
-// inputs default to 14px) to prevent the zoom.
+// UA sniffing or viewport width). Desktop browsers (even with touchscreens or
+// narrow windows) report pointer: fine, so this never matches them.
+//
+// 1. iOS Safari and Android Chrome auto-zoom the page when focusing an input
+//    with font-size < 16px, and never zoom back out on blur, leaving the page
+//    stuck zoomed. Force 16px on all focusable form fields (antd inputs default
+//    to 14px) to prevent the zoom.
+//
+// 2. Mobile browsers also inflate text to improve readability
+//    (-webkit-text-size-adjust defaults to auto). Inside a fixed-size container
+//    this makes the text taller than its wrapper, so it gets clipped — the
+//    clearest victim is the antd small Switch, whose track is only 16px tall /
+//    28px wide with overflow:hidden; the "sort by frequency" label gets blown
+//    past the track and chopped. Pin to 100% so the declared font-size is
+//    honored.
 // ---------------------------------------------------------------------------
 @media (pointer: coarse)
   input,
@@ -194,3 +203,6 @@
   .ant-input-number-input,
   .ant-select-selection-search-input
     font-size 16px !important
+  html
+    -webkit-text-size-adjust 100%
+    text-size-adjust 100%

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "5.0.7",
+  "version": "5.0.8",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",