root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(style): use --app-banner-height in scroller container

Browse Source
This commit is contained in:
jialin
2026-05-21 19:58:16 +08:00
committed by jialin
parent e7a376db70
commit 6f896b4f94
11 changed files with 68 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/global.less
+1 -1
View File
@@ -6,6 +6,7 @@
html {
--page-header-height: 56px;
--page-content-padding: 8px;
--app-banner-height: 0px;
--color-text-light-1: rgba(255, 255, 255, 90%);
--color-fill-1: var(--ant-color-bg-container);
--color-scrollbar-thumb: rgba(193, 193, 193, 80%);
@@ -237,7 +238,6 @@ body {
// ============== new theme style start ===============
.ant-pro-layout {
background-color: var(--color-fill-1);
height: 100%;
.ant-pro-sider-footer {
src/layouts/index.tsx
+26 -17
View File
@@ -425,24 +425,33 @@ export default (props: any) => {
{...runtimeConfig}
ErrorBoundary={ErrorBoundary}
>
<PluginExtraFields name="GlobalLicenseBanner" />
<Exception
route={matchedRoute}
notFound={runtimeConfig?.notFound}
noFound={runtimeConfig?.noFound}
unAccessible={runtimeConfig?.unAccessible}
noAccessible={runtimeConfig?.noAccessible}
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100vh',
overflow: 'hidden'
}}
>
{isNoContainerPage ? (
<Outlet />
) : (
<PageContainerInner>
<div>
<Outlet />
</div>
</PageContainerInner>
)}
</Exception>
<PluginExtraFields name="GlobalLicenseBanner" />
<Exception
route={matchedRoute}
notFound={runtimeConfig?.notFound}
noFound={runtimeConfig?.noFound}
unAccessible={runtimeConfig?.unAccessible}
noAccessible={runtimeConfig?.noAccessible}
>
{isNoContainerPage ? (
<Outlet />
) : (
<PageContainerInner>
<div>
<Outlet />
</div>
</PageContainerInner>
)}
</Exception>
</div>
{NoResourceModal}
{contextHolder}
</ProLayout>
src/pages/_components/styles/page-box.less
+22 -1
View File
@@ -1,4 +1,9 @@
.containerWrapper {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
:global {
.ant-affix {
top: 0 !important;
@@ -17,8 +22,24 @@
font-size: 16px;
}
.ant-pro-page-container {
display: flex;
flex-direction: column;
min-height: 0;
}
.ant-pro-grid-content,
.ant-pro-grid-content-children {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.ant-pro-page-container-children-container {
height: calc(100vh - 16px);
flex: 1;
min-height: 0;
height: auto;
display: flex;
flex-direction: column;
border: 1px solid var(--color-border-container);
src/pages/benchmark/filters/index.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ const FilterFormContent: React.FC<FilterFormContentProps> = forwardRef(
<FilterForm
ref={filterRef}
width={232}
contentHeight={'calc(100vh - 122px)'}
contentHeight={'calc(100vh - var(--app-banner-height, 0px) - 122px)'}
open={open}
onClose={onClose}
onClear={onClear}
src/pages/cluster-management/cluster-create.tsx
+3 -1
View File
@@ -331,7 +331,9 @@ const ClusterCreate: React.FC<{
)}
<ColumnWrapper
maxHeight={
isAddWorkerStep ? 'calc(100vh - 200px)' : 'calc(100vh - 150px)'
isAddWorkerStep
? 'calc(100vh - var(--app-banner-height, 0px) - 200px)'
: 'calc(100vh - var(--app-banner-height, 0px) - 150px)'
}
styles={{
container: { paddingTop: 16, paddingBottom: 16 }
src/pages/llmodels/filters/index.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ const FilterFormContent: React.FC<FilterFormContentProps> = forwardRef(
<FilterForm
ref={filterRef}
width={232}
contentHeight={'calc(100vh - 74px)'}
contentHeight={'calc(100vh - var(--app-banner-height, 0px) - 74px)'}
open={open}
onClose={onClose}
onClear={onClear}
src/pages/playground/components/multiple-chat/index.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
const modelsCounterMap = useRef<Record<string, number>>({});
const modelRefs = useRef<any>({});
const chatListScrollRef = useRef<any>(null);
const boxHeight = `calc(100vh - ${HEADER_HEIGHT}px - 2px - var(--page-header-height) - var(--page-content-padding) - var(--page-content-padding))`;
const boxHeight = `calc(100vh - var(--app-banner-height, 0px) - ${HEADER_HEIGHT}px - 2px - var(--page-header-height) - var(--page-content-padding) - var(--page-content-padding))`;
const [actions, setActions] = useState<MessageItemAction[]>([
'upload',
'delete',
src/pages/playground/speech/stt.tsx
+1 -1
View File
@@ -300,7 +300,7 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
<div
className="ground-left-wrapper"
style={{
height: `calc(100vh - ${HEADER_HEIGHT}px)`
height: `calc(100vh - var(--app-banner-height, 0px) - ${HEADER_HEIGHT}px)`
}}
>
<div className="ground-left">
src/pages/playground/style/ground-llm.less
+3 -2
View File
@@ -10,8 +10,9 @@
flex-direction: column;
position: relative;
height: calc(
100vh - @HEADER_HEIGHT - 4px - var(--page-content-padding) -
var(--page-content-padding) - var(--page-header-height)
100vh - var(--app-banner-height, 0px) - @HEADER_HEIGHT - 4px -
var(--page-content-padding) - var(--page-content-padding) -
var(--page-header-height)
);
width: calc(100% - 390px);
src/pages/playground/style/params-container.module.less
+3 -2
View File
@@ -6,8 +6,9 @@
border-left: 1px solid var(--ant-color-split);
transition: width 0.3s ease;
height: calc(
100vh - @HEADER_HEIGHT - 2px - var(--page-content-padding) -
var(--page-content-padding) - var(--page-header-height)
100vh - var(--app-banner-height, 0px) - @HEADER_HEIGHT - 2px -
var(--page-content-padding) - var(--page-content-padding) -
var(--page-header-height)
);
padding-top: 16px;
display: flex;
src/pages/playground/style/play-ground.less
+6 -4
View File
@@ -40,8 +40,9 @@
.params {
overflow: hidden;
height: calc(
100vh - var(--page-header-height) - var(--page-content-padding) -
var(--page-content-padding) - @HEADER_HEIGHT
100vh - var(--app-banner-height, 0px) - var(--page-header-height) -
var(--page-content-padding) - var(--page-content-padding) -
@HEADER_HEIGHT
);
.collapse {
@@ -74,8 +75,9 @@
.ant-divider {
margin: 0;
height: calc(
100vh - var(--page-header-height) - 2px - var(--page-content-padding) -
var(--page-content-padding) - @HEADER_HEIGHT
100vh - var(--app-banner-height, 0px) - var(--page-header-height) -
2px - var(--page-content-padding) - var(--page-content-padding) -
@HEADER_HEIGHT
);
}
}