Remzona54/Remnawave_frontend
1
0
Fork 0
mirror of https://github.com/remnawave/frontend.git synced 2026-05-13 12:16:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

style: improve layout and responsiveness of node system card components

Browse source
This commit is contained in:
kastov 2026-03-15 22:58:06 +03:00
parent 354d6c630c
commit aea922ccb1
No known key found for this signature in database
GPG key ID: 1B27BE29057F4C90
2 changed files with 17 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/widgets/dashboard/nodes/node-system-card/node-system-card.module.css
View file

@ -2,6 +2,7 @@
position: relative;
overflow: hidden;
min-width: 0;
width: 100%;
}
.screenshotButton {
@ -50,6 +51,8 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
max-width: 100%;
}
.infoSection {

22
src/widgets/dashboard/nodes/node-system-card/node-system-card.widget.tsx
View file

@ -104,7 +104,13 @@ export const NodeSystemCardWidget = memo((props: IProps) => {
/>
<Group gap="xs">
<Badge color="violet" ff="monospace" size="sm" variant="soft">
<Badge
color="violet"
ff="monospace"
size="sm"
variant="soft"
visibleFrom="sm"
>
{info.platform} / {info.arch}
</Badge>
<Badge
@ -154,8 +160,8 @@ export const NodeSystemCardWidget = memo((props: IProps) => {
{t('node-system-card.widget.system')}
</Text>
<Stack gap={0} style={{ minWidth: 0 }}>
<Text className={classes.statLabel}>
<Stack gap={0} style={{ minWidth: 0, overflow: 'hidden' }}>
<Text className={classes.statLabel} component="div">
<Group gap={4}>
<PiCpuDuotone size={12} />
CPU
@ -168,9 +174,9 @@ export const NodeSystemCardWidget = memo((props: IProps) => {
</Tooltip>
</Stack>
<Group grow>
<Stack gap={0}>
<Text className={classes.statLabel}>
<Group grow style={{ overflow: 'hidden' }}>
<Stack gap={0} style={{ minWidth: 0 }}>
<Text className={classes.statLabel} component="div">
<Group gap={4}>
<PiLinuxLogoDuotone size={12} />
{t('node-system-card.widget.kernel')}
@ -179,8 +185,8 @@ export const NodeSystemCardWidget = memo((props: IProps) => {
<Text className={classes.statValue}>{info.release}</Text>
</Stack>
{info.networkInterfaces.length > 0 && (
<Stack gap={0}>
<Text className={classes.statLabel}>
<Stack gap={0} style={{ minWidth: 0 }}>
<Text className={classes.statLabel} component="div">
<Group gap={4}>
<PiNetworkDuotone size={12} />
{t('node-system-card.widget.network')}