antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 10:03:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix header being squished by table

Browse source
This commit is contained in:
jeffvli 2023-01-08 02:13:39 -08:00
parent 5344493845
commit b5ad30a9bc
2 changed files with 12 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx
View file

@ -8,7 +8,12 @@ import type {
RowDoubleClickedEvent, RowDoubleClickedEvent,
} from '@ag-grid-community/core'; } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { getColumnDefs, TablePagination, VirtualTable } from '/@/renderer/components'; import {
getColumnDefs,
TablePagination,
VirtualGridAutoSizerContainer,
VirtualTable,
} from '/@/renderer/components';
import { import {
useCurrentServer, useCurrentServer,
usePlaylistDetailStore, usePlaylistDetailStore,
@ -185,7 +190,7 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
}; };
return ( return (
<> <VirtualGridAutoSizerContainer>
<VirtualTable <VirtualTable
// https://github.com/ag-grid/ag-grid/issues/5284 // https://github.com/ag-grid/ag-grid/issues/5284
// Key is used to force remount of table when display, rowHeight, or server changes // Key is used to force remount of table when display, rowHeight, or server changes
@ -222,6 +227,6 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
/> />
)} )}
</AnimatePresence> </AnimatePresence>
</> </VirtualGridAutoSizerContainer>
); );
}; };

11
src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
View file

@ -1,6 +1,6 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Group, Stack } from '@mantine/core'; import { Group } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals'; import { closeAllModals, openModal } from '@mantine/modals';
import { AnimatePresence, motion, Variants } from 'framer-motion'; import { AnimatePresence, motion, Variants } from 'framer-motion';
import { RiArrowDownSLine, RiArrowUpSLine } from 'react-icons/ri'; import { RiArrowDownSLine, RiArrowUpSLine } from 'react-icons/ri';
@ -13,7 +13,7 @@ import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playli
import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation'; import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation'; import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
import { Button, Paper, Text, toast } from '/@/renderer/components'; import { Button, Paper, Text, toast, VirtualGridContainer } from '/@/renderer/components';
import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/save-as-playlist-form'; import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/save-as-playlist-form';
import { useCurrentServer } from '/@/renderer/store'; import { useCurrentServer } from '/@/renderer/store';
import { ServerType } from '/@/renderer/api/types'; import { ServerType } from '/@/renderer/api/types';
@ -137,10 +137,7 @@ const PlaylistDetailSongListRoute = () => {
return ( return (
<AnimatedPage key={`playlist-detail-songList-${playlistId}`}> <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
<Stack <VirtualGridContainer>
h="100%"
spacing={0}
>
<PlaylistDetailSongListHeader <PlaylistDetailSongListHeader
handleToggleShowQueryBuilder={handleToggleShowQueryBuilder} handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
tableRef={tableRef} tableRef={tableRef}
@ -194,7 +191,7 @@ const PlaylistDetailSongListRoute = () => {
)} )}
</AnimatePresence> </AnimatePresence>
<PlaylistDetailSongListContent tableRef={tableRef} /> <PlaylistDetailSongListContent tableRef={tableRef} />
</Stack> </VirtualGridContainer>
</AnimatedPage> </AnimatedPage>
); );
}; };