[resumes][chore] remove overflow on page components

pull/497/head
Wu Peirong 2 years ago
parent c86c77d1e0
commit f7d1c8d2c4

@ -57,7 +57,7 @@ export default function ResumeCommentsList({
} }
return ( return (
<div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-10 overflow-y-auto overflow-x-hidden pb-16"> <div className="flow-root w-full flex-col space-y-10 overflow-y-auto overflow-x-hidden lg:h-[calc(100vh-13rem)]">
{RESUME_COMMENTS_SECTIONS.map(({ label, value }) => { {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
const comments = commentsQuery.data const comments = commentsQuery.data
? commentsQuery.data.filter((comment: ResumeComment) => { ? commentsQuery.data.filter((comment: ResumeComment) => {

@ -236,8 +236,8 @@ export default function ResumeReviewPage() {
<Head> <Head>
<title>{detailsQuery.data.title}</title> <title>{detailsQuery.data.title}</title>
</Head> </Head>
<main className="h-full flex-1 space-y-2 overflow-y-auto py-4 px-8 xl:px-12 2xl:pr-16"> <main className="h-full flex-1 space-y-2 py-4 px-8 xl:px-12 2xl:pr-16">
<div className="flex justify-between"> <div className="flex flex-wrap justify-between">
<h1 className="w-[60%] pr-2 text-2xl font-semibold leading-7 text-slate-900"> <h1 className="w-[60%] pr-2 text-2xl font-semibold leading-7 text-slate-900">
{detailsQuery.data.title} {detailsQuery.data.title}
</h1> </h1>

@ -395,7 +395,7 @@ export default function ResumeHomePage() {
leave="transition ease-in-out duration-300 transform" leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full"> leaveTo="translate-x-full">
<Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-scroll bg-white py-4 pb-12 shadow-xl"> <Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">
<div className="flex items-center justify-between px-4"> <div className="flex items-center justify-between px-4">
<h2 className="text-lg font-medium text-slate-900"> <h2 className="text-lg font-medium text-slate-900">
Quick access Quick access
@ -614,7 +614,7 @@ export default function ResumeHomePage() {
</div> </div>
</div> </div>
<div className="relative lg:left-64 lg:w-[calc(100%-16rem)]"> <div className="relative lg:left-64 lg:w-[calc(100%-16rem)]">
<div className="lg:border-grey-200 sticky top-0 z-10 flex flex-wrap items-center justify-between pt-6 pb-2 lg:border-b"> <div className="lg:border-grey-200 sticky top-16 z-10 flex flex-wrap items-center justify-between bg-slate-50 pt-6 pb-2 lg:border-b">
<div className="border-grey-200 mb-4 flex w-full justify-between border-b pb-2 lg:mb-0 lg:w-auto lg:border-none xl:pb-0"> <div className="border-grey-200 mb-4 flex w-full justify-between border-b pb-2 lg:mb-0 lg:w-auto lg:border-none xl:pb-0">
<div> <div>
<Tabs <Tabs
@ -705,13 +705,13 @@ export default function ResumeHomePage() {
{getEmptyDataText(tabsValue, searchValue, userFilters)} {getEmptyDataText(tabsValue, searchValue, userFilters)}
</div> </div>
) : ( ) : (
<div className="h-[calc(100vh-9rem)] pb-10 lg:h-[calc(100vh-6rem)]"> <div>
<div className="h-[85%] overflow-y-auto"> <div className="h-[85%] overflow-y-auto">
<div> <div>
<ResumeListItems resumes={getTabResumes()} /> <ResumeListItems resumes={getTabResumes()} />
</div> </div>
</div> </div>
<div className="flex h-[15%] items-center justify-center"> <div className="flex h-[15%] items-center justify-center p-4">
{getTabTotalPages() > 1 && ( {getTabTotalPages() > 1 && (
<div> <div>
<Pagination <Pagination

@ -246,7 +246,7 @@ export default function SubmitResumeForm({
</div> </div>
)} )}
{status === 'authenticated' && ( {status === 'authenticated' && (
<main className="h-[calc(100vh-4rem)] flex-1 overflow-y-auto"> <main className="flex-1">
<section <section
aria-labelledby="primary-heading" aria-labelledby="primary-heading"
className="flex h-full min-w-0 flex-1 flex-col lg:order-last"> className="flex h-full min-w-0 flex-1 flex-col lg:order-last">

Loading…
Cancel
Save