Fix overlapping bet panel

This commit is contained in:
James Grugett 2022-04-03 16:57:38 -05:00
parent d7b702fe00
commit 9420b10bd9
3 changed files with 37 additions and 42 deletions

View File

@ -86,11 +86,8 @@ export default function Sidebar() {
const navigationOptions = user === null ? signedOutNavigation : navigation const navigationOptions = user === null ? signedOutNavigation : navigation
return ( return (
<nav <nav aria-label="Sidebar" className="sticky divide-y divide-gray-300">
aria-label="Sidebar" <div className="mt-2 space-y-1 pb-6">
className="sticky top-4 mt-4 divide-y divide-gray-300"
>
<div className="space-y-1 pb-6">
<ManifoldLogo hideText /> <ManifoldLogo hideText />
</div> </div>

View File

@ -14,16 +14,16 @@ export function Page(props: {
<div> <div>
<div <div
className={clsx( className={clsx(
'mx-auto w-full pb-16 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl', 'mx-auto w-full pb-16 pt-6 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl',
margin && 'px-4' margin && 'px-4'
)} )}
> >
<div className="hidden lg:col-span-3 lg:block xl:col-span-2"> <div className="hidden lg:col-span-2 lg:block">
{assertUser !== 'signed-out' && <Sidebar />} {assertUser !== 'signed-out' && <Sidebar />}
</div> </div>
<main <main
className={clsx( className={clsx(
'pt-6 lg:col-span-9', 'lg:col-span-8',
rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8' rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8'
)} )}
> >
@ -33,7 +33,7 @@ export function Page(props: {
<div className="block xl:hidden">{rightSidebar}</div> <div className="block xl:hidden">{rightSidebar}</div>
</main> </main>
<aside className="hidden xl:col-span-3 xl:block"> <aside className="hidden xl:col-span-3 xl:block">
<div className="sticky top-4 space-y-4">{rightSidebar}</div> <div className="sticky space-y-4">{rightSidebar}</div>
</aside> </aside>
</div> </div>

View File

@ -141,8 +141,7 @@ export default function ContractPage(props: {
/> />
)} )}
<Col className="w-full justify-between md:flex-row"> <Col className="w-full justify-between rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
<div className="flex-1 rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
<ContractOverview <ContractOverview
contract={contract} contract={contract}
bets={bets ?? []} bets={bets ?? []}
@ -176,7 +175,6 @@ export default function ContractPage(props: {
</> </>
)} )}
<BetsSection contract={contract} user={user ?? null} bets={bets} /> <BetsSection contract={contract} user={user ?? null} bets={bets} />
</div>
</Col> </Col>
</Page> </Page>
) )