#RI-5077 - fix small resolutions when insights panel is opened

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -168,7 +168,7 @@ const AutoRefresh = ({
         {displayText && (
           <span data-testid="refresh-message-label">{`${enableAutoRefresh ? 'Auto refresh:' : 'Last refresh:'}`}</span>
         )}
-        <span className={styles.time} data-testid="refresh-message">
+        <span className={cx('refresh-message-time', styles.time)} data-testid="refresh-message">
           {` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`}
         </span>
       </EuiTextColor>
@@ -185,7 +185,7 @@ const AutoRefresh = ({
           disabled={loading || disabled}
           onClick={handleRefreshClick}
           onMouseEnter={updateLastRefresh}
-          className={cx(styles.btn, { [styles.rolling]: enableAutoRefresh })}
+          className={cx('auto-refresh-btn', styles.btn, { [styles.rolling]: enableAutoRefresh })}
           aria-labelledby={testid?.replaceAll?.('-', ' ') || 'Refresh button'}
           data-testid={testid || 'refresh-btn'}
         />

redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.tsx

@@ -140,7 +140,7 @@ const DatabaseSidePanels = (props: Props) => {
   ), [tabSelected, totalUnread, isFullScreen])
 
   return (
-    <div className={styles.wrapper}>
+    <>
       {isOpen && (
         <div
           className={cx(styles.panel, panelClassName, { [styles.fullScreen]: isFullScreen })}
@@ -175,7 +175,7 @@ const DatabaseSidePanels = (props: Props) => {
           </div>
         </div>
       )}
-    </div>
+    </>
   )
 }
 

redisinsight/ui/src/components/database-side-panels/styles.module.scss

@@ -4,7 +4,7 @@ $animation-duration: 300ms;
 
 .panel {
   height: 100%;
-  width: 460px;
+  width: 100%;
   padding-right: 16px;
 
   &.fullScreen {

redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx

@@ -168,7 +168,7 @@ const BrowserSearchPanel = (props: Props) => {
       className={styles.addKey}
       data-testid="btn-add-key"
     >
-      + Key
+      + <span className={styles.addKeyText}>Key</span>
     </EuiButton>
   )
 
@@ -182,7 +182,7 @@ const BrowserSearchPanel = (props: Props) => {
       data-testid="btn-bulk-actions"
       aria-label="bulk actions"
     >
-      Bulk Actions
+      <span className={styles.bulkActionsText}>Bulk Actions</span>
     </EuiButton>
   )
 

redisinsight/ui/src/pages/browser/components/browser-search-panel/styles.module.scss

@@ -1,3 +1,5 @@
+@import "uiSrc/styles/mixins/_global.scss";
+
 .content {
   width: 100%;
   padding: 0 16px 16px 16px;
@@ -33,6 +35,40 @@
   }
 }
 
+@include insights-open {
+  .content {
+    .addKey {
+      width: 36px !important;
+      min-width: auto !important;
+
+      .addKeyText {
+        display: none;
+      }
+
+      :global(.euiButton__content) {
+        padding: 0;
+      }
+
+      :global(.euiButton__text) {
+        font-size: 20px !important;
+        font-weight: 400 !important;
+      }
+    }
+
+    .bulkActions {
+      width: 36px !important;
+
+      :global(.euiButton__text) {
+        display: none !important;
+      }
+
+      :global(.euiButtonContent__icon) {
+        width: 13px;
+      }
+    }
+  }
+}
+
 .viewTypeSwitch,
 .searchModeSwitch {
   padding: 0 18px;

redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss

@@ -1,3 +1,5 @@
+@import "uiSrc/styles/mixins/_global.scss";
+
 .container {
   width: 168px;
   height: 36px;
@@ -42,6 +44,13 @@
   }
 }
 
+@include insights-open {
+  .container {
+    width: 128px;
+  }
+}
+
+
 .filterKeyType {
   position: relative;
   height: 30px;

redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx

@@ -207,7 +207,7 @@ const KeysHeader = (props: Props) => {
         {({ width }) => (
           <div style={{ width }}>
             <div className={styles.bottom}>
-              <div>
+              <div className={styles.keysSummary}>
                 <KeysSummary
                   items={keysState.keys}
                   totalItemsCount={keysState.total}

redisinsight/ui/src/pages/browser/components/keys-header/styles.module.scss

@@ -2,7 +2,7 @@
   width: 100%;
   background-color: var(--euiColorEmptyShade);
 
-  padding: 8px 12px;
+  padding: 4px 12px;
 
   display: flex;
   flex-shrink: 0;
@@ -16,6 +16,8 @@
   align-items: center;
   justify-content: space-between;
   min-height: 38px;
+
+  flex-wrap: wrap;
 }
 
 .viewTypeSwitch {
@@ -55,10 +57,12 @@
   }
 }
 
-.refreshContainer {
+.keysSummary {
+  margin: 4px 8px 4px 4px;
 }
 
 .keysControlsWrapper {
   display: flex;
   align-items: center;
+  margin: 4px 4px 4px auto;
 }

redisinsight/ui/src/pages/browser/components/redisearch-key-list/styles.module.scss

@@ -1,3 +1,5 @@
+@import "uiSrc/styles/mixins/_global.scss";
+
 .container {
   height: 36px;
   width: 200px;
@@ -62,6 +64,12 @@
   }
 }
 
+@include insights-open {
+  .container {
+    width: 154px;
+  }
+}
+
 .searchMode {
   position: relative;
   line-height: 14px !important;

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-formatter/styles.module.scss

@@ -1,3 +1,5 @@
+@import "uiSrc/styles/mixins/_global.scss";
+
 .container {
   margin-right: 12px;
   height: 30px;
@@ -41,6 +43,12 @@
   }
 }
 
+@include insights-open {
+  .container {
+    margin-right: 8px;
+  }
+}
+
 .changeView:global(.euiSuperSelectControl) {
   border: none !important;
   background-color: inherit !important;
@@ -88,6 +96,13 @@
   height: 20px !important;
 }
 
+@include insights-open {
+  .controlsIcon {
+    width: 18px !important;
+    height: 18px !important;
+  }
+}
+
 .dropdownDisplaySmall {
   left: 100px !important;
 }

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-ttl/KeyDetailsHeaderTTL.tsx

@@ -78,7 +78,7 @@ const KeyDetailsHeaderTTL = ({
   }
 
   const appendTTLEditing = () =>
-    (!ttlIsEditing ? <EuiIcon type="pencil" color="subdued" /> : '')
+    (!ttlIsEditing ? <EuiIcon className={styles.iconPencil} type="pencil" color="subdued" /> : '')
 
   return (
 

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-ttl/styles.module.scss

@@ -1,3 +1,5 @@
+@import "uiSrc/styles/mixins/_global.scss";
+
 .subtitleText {
   padding: 6px 2px 6px 0;
 }
@@ -6,8 +8,6 @@
   right: 25px;
 }
 
-
-
 .cancelEditBtn:hover {
   color: var(--euiColorColorDanger) !important;
 }
@@ -41,3 +41,25 @@
 .ttlTextValue {
   padding-left: 11px;
 }
+
+@include insights-open {
+  .flexItemTTL {
+    width: 134px;
+    min-width: 134px;
+  }
+
+  .ttlInput {
+    min-width: 90px;
+    font-size: 12px !important;
+    &.editing {
+      width: 92px;
+    }
+  }
+
+  :global(.euiFormControlLayout--compressed > .euiFormControlLayout__append) {
+    &.iconPencil {
+      width: 24px !important;
+      padding: 0 6px !important;
+    }
+  }
+}

redisinsight/ui/src/pages/browser/modules/key-details-header/styles.module.scss

@@ -1,3 +1,5 @@
+@import "uiSrc/styles/mixins/_global.scss";
+
 :global {
   .browserPage {
     .key-details-header {
@@ -26,6 +28,23 @@
   }
 }
 
+@include insights-open {
+  :global {
+    .key-details-header {
+      .euiText--small {
+        font-size: 12px;
+      }
+    }
+
+    .euiFlexGroup--gutterMedium {
+      margin: -4px;
+    }
+    .euiFlexGroup--gutterMedium > .euiFlexItem {
+      margin: 4px;
+    }
+  }
+}
+
 
 .container {
   min-height: 108px;
@@ -62,3 +81,33 @@
   position: relative;
   z-index: 2;
 }
+
+@include insights-open {
+  .actionBtn {
+    margin-right: 8px;
+
+    :global {
+      .auto-refresh-btn {
+        width: 32px;
+        height: 32px;
+
+        .euiButtonIcon__icon {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+}
+
+@include insights-open(1024px) {
+  .actionBtn {
+    margin-right: 8px;
+
+    :global {
+      .refresh-message-time {
+        display: none;
+      }
+    }
+  }
+}

redisinsight/ui/src/pages/cluster-details/components/cluster-details-graphics/styles.module.scss

@@ -1,3 +1,5 @@
+@import "uiSrc/styles/mixins/_global.scss";
+
 .wrapper {
   background-color: var(--euiColorLightestShade);
   border-radius: 16px;
@@ -60,3 +62,9 @@
     }
   }
 }
+
+@include insights-open(1260px) {
+  .wrapper {
+    flex-direction: column;
+  }
+}

redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/styles.module.scss

@@ -1,5 +1,6 @@
 .container {
-  height: calc(100% - 126px);
+  flex-grow: 1;
+  overflow: hidden;
 }
 
 .emptyMessageWrapper {

redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx

@@ -90,10 +90,10 @@ const Header = (props: Props) => {
       >
         {!!items.length && (
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
+            <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false} wrap>
               <EuiHideFor sizes={['xs', 's']}>
                 <EuiFlexItem grow={false}>
-                  <EuiText className={styles.text}>Report generated on:</EuiText>
+                  <EuiText className={styles.text} size="s">Report generated on:</EuiText>
                 </EuiFlexItem>
               </EuiHideFor>
               <EuiFlexItem>
@@ -109,10 +109,15 @@ const Header = (props: Props) => {
               </EuiFlexItem>
               {!!progress && (
                 <EuiFlexItem grow={false}>
-                  <EuiText className={cx(styles.progress, styles.text, styles.progressContainer)} data-testid="bulk-delete-summary">
+                  <EuiText
+                    className={cx(styles.progress, styles.text, styles.progressContainer)}
+                    size="s"
+                    data-testid="bulk-delete-summary"
+                  >
                     <EuiText
                       color={progress.total === progress.processed ? undefined : 'warning'}
                       className={cx(styles.progress, styles.text)}
+                      size="s"
                       data-testid="analysis-progress"
                     >
                       {'Scanned '}
@@ -145,7 +150,7 @@ const Header = (props: Props) => {
                 New Report
               </EuiButton>
             </EuiFlexItem>
-            <EuiFlexItem style={{ paddingLeft: 12 }} grow={false}>
+            <EuiFlexItem style={{ paddingLeft: 6 }} grow={false}>
               <EuiToolTip
                 position="bottom"
                 anchorClassName={styles.tooltipAnchor}