diff --git a/redisinsight/ui/src/pages/browser/BrowserPage.tsx b/redisinsight/ui/src/pages/browser/BrowserPage.tsx
index b8664e6a63..67f69b2a9d 100644
--- a/redisinsight/ui/src/pages/browser/BrowserPage.tsx
+++ b/redisinsight/ui/src/pages/browser/BrowserPage.tsx
@@ -5,6 +5,8 @@ import cx from 'classnames'
import { isNumber } from 'lodash'
import { useTheme } from '@redis-ui/styles'
+import styled from 'styled-components'
+
import {
formatLongName,
getDbIndex,
@@ -66,6 +68,11 @@ const widthExplorePanel = 460
export const firstPanelId = 'keys'
export const secondPanelId = 'keyDetails'
+const BorderedResizablePanel = styled(ResizablePanel)`
+ border-radius: 8px;
+ border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
+`
+
const isOneSideMode = (isInsightsOpen: boolean) =>
globalThis.innerWidth <
widthResponsiveSize + (isInsightsOpen ? widthExplorePanel : 0)
@@ -324,7 +331,7 @@ const BrowserPage = () => {
direction="horizontal"
onLayout={onPanelWidthChange}
>
- {
arePanelsCollapsed ||
(isBrowserFullScreen && !isRightPanelOpen),
})}
- style={{
- border: `1px solid ${theme.semantic.color.border.neutral500}`,
- borderRadius: `8px`,
- }}
>
{
removeSelectedKey={handleRemoveSelectedKey}
handleAddKeyPanel={handleAddKeyPanel}
/>
-
+
{!arePanelsCollapsed && !isBrowserFullScreen && (
)}
- {
[styles.keyDetails]:
arePanelsCollapsed || (isRightPanelOpen && isBrowserFullScreen),
})}
- style={{
- border: `1px solid ${theme.semantic.color.border.neutral500}`,
- borderRadius: `5px`,
- }}
>
{
handleBulkActionsPanel={handleBulkActionsPanel}
closeRightPanels={closeRightPanels}
/>
-
+
diff --git a/redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx b/redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx
index f37831a362..483f1cd97c 100644
--- a/redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx
+++ b/redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx
@@ -1,5 +1,6 @@
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useSelector } from 'react-redux'
+import styled from 'styled-components'
import InstanceHeader from 'uiSrc/components/instance-header'
import { ExplorePanelTemplate } from 'uiSrc/templates'
@@ -27,6 +28,10 @@ export interface Props {
children: React.ReactNode
}
+const ButtonGroupResizablePanel = styled(ResizablePanel)`
+ flex-basis: 27px !important;
+`
+
export const getDefaultSizes = () => {
const storedSizes = localStorageService.get(
BrowserStorageItem.cliResizableContainer,
@@ -35,17 +40,6 @@ export const getDefaultSizes = () => {
return storedSizes && Array.isArray(storedSizes) ? storedSizes : [60, 40]
}
-export const calculateMainPanelInitialSize = () => {
- const total = window.innerHeight
- const remaining = total - 26
- return Math.floor((remaining / total) * 100)
-}
-
-export const calculateBottomGroupPanelInitialSize = () => {
- const total = window.innerHeight
- return Math.ceil((26 / total) * 100)
-}
-
const roundUpSizes = (sizes: number[]) => [
Math.floor(sizes[0]),
Math.ceil(sizes[1]),
@@ -58,9 +52,6 @@ const InstancePageTemplate = (props: Props) => {
const { isShowCli, isShowHelper } = useSelector(cliSettingsSelector)
const { isShowMonitor } = useSelector(monitorSelector)
- const sizeMain: number = calculateMainPanelInitialSize()
- const sizeBottomCollapsed: number = calculateBottomGroupPanelInitialSize()
-
const ref = useRef(null)
useEffect(
@@ -92,7 +83,7 @@ const InstancePageTemplate = (props: Props) => {
if (isShowBottomGroup) {
ref.current?.setLayout(roundUpSizes(sizes))
} else {
- ref.current?.setLayout([sizeMain, sizeBottomCollapsed])
+ ref.current?.setLayout([100, 0])
}
}, [isShowBottomGroup])
@@ -111,7 +102,7 @@ const InstancePageTemplate = (props: Props) => {
{
data-testid="resize-btn-browser-cli"
style={{ display: isShowBottomGroup ? 'inherit' : 'none' }}
/>
-
- }
+
-
+
>
)