refactor: CardSidebar layout breakpoint md → lg for wider description area
This commit is contained in:
@@ -273,7 +273,7 @@
|
|||||||
.brutal-border-sidebar {
|
.brutal-border-sidebar {
|
||||||
border-bottom: var(--border-width) solid var(--blue);
|
border-bottom: var(--border-width) solid var(--blue);
|
||||||
}
|
}
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 1024px) {
|
||||||
.brutal-border-sidebar {
|
.brutal-border-sidebar {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-right: var(--border-width) solid var(--blue);
|
border-right: var(--border-width) solid var(--blue);
|
||||||
|
|||||||
@@ -97,10 +97,10 @@ describe('CardSidebar', () => {
|
|||||||
expect(sidebar).toHaveClass('brutal-border-sidebar');
|
expect(sidebar).toHaveClass('brutal-border-sidebar');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('sidebar column has fixed width on md', () => {
|
it('sidebar column has fixed width on lg', () => {
|
||||||
render(<CardSidebar sidebar={<span>Sidebar</span>}>Main</CardSidebar>);
|
render(<CardSidebar sidebar={<span>Sidebar</span>}>Main</CardSidebar>);
|
||||||
const sidebar = screen.getByText('Sidebar').parentElement;
|
const sidebar = screen.getByText('Sidebar').parentElement;
|
||||||
expect(sidebar).toHaveClass('md:w-64');
|
expect(sidebar).toHaveClass('lg:w-64');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('main column fills remaining space', () => {
|
it('main column fills remaining space', () => {
|
||||||
|
|||||||
@@ -108,9 +108,9 @@ interface CardSidebarProps {
|
|||||||
*/
|
*/
|
||||||
export function CardSidebar({ sidebar, children, className }: CardSidebarProps) {
|
export function CardSidebar({ sidebar, children, className }: CardSidebarProps) {
|
||||||
return (
|
return (
|
||||||
<div className={cn('flex flex-col md:flex-row', className)}>
|
<div className={cn('flex flex-col lg:flex-row', className)}>
|
||||||
<div className="shrink-0 md:w-64 brutal-border-sidebar pb-6 md:pb-0 md:pr-8 mb-6 md:mb-0">{sidebar}</div>
|
<div className="shrink-0 lg:w-64 brutal-border-sidebar pb-6 lg:pb-0 lg:pr-8 mb-6 lg:mb-0">{sidebar}</div>
|
||||||
<div className="flex-1 min-w-0 md:pl-8">{children}</div>
|
<div className="flex-1 min-w-0 lg:pl-8">{children}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user