Skip to content

Commit 7d1a444

Browse files
committed
Improve data allocation layout for tablets
1 parent 308e1a5 commit 7d1a444

File tree

3 files changed

+8
-8
lines changed

3 files changed

+8
-8
lines changed

src/components/index-page/data-colocation/component-tree.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const ComponentTree = forwardRef(function ComponentTree(
1616
<div
1717
ref={ref}
1818
className={clsx(
19-
"sector-opacity mx-auto flex max-w-[500px] justify-between [--gap-x:20px] md:gap-x-10 md:[--gap-x:32px] 3xl:gap-x-20",
19+
"sector-opacity flex max-w-[500px] justify-between [--gap-x:20px] md:gap-x-10 md:[--gap-x:32px] 3xl:gap-x-20",
2020
className,
2121
)}
2222
{...rest}

src/components/index-page/data-colocation/friend-list.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function FriendList({ friends }: FriendList) {
1313
<h4 className="typography-body-lg border-b border-neu-200 bg-neu-50 px-3 py-2 dark:border-neu-100 dark:bg-neu-50/50">
1414
Friends
1515
</h4>
16-
<ul className="flex flex-col gap-6 p-3 lg:p-6 max-sm:[&>*:not(:first-child)]:hidden">
16+
<ul className="flex flex-col gap-6 p-3 lg:p-6 max-md:[&>*:not(:first-child)]:hidden">
1717
{friends.map(friend => (
1818
<FriendListItem key={friend.name} {...friend} />
1919
))}

src/components/index-page/data-colocation/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -155,23 +155,23 @@ export function DataColocation() {
155155
return (
156156
<section
157157
ref={sectionRef}
158-
className="gql-container gql-section flex flex-wrap justify-between gap-4 sm:max-xl:gap-y-8 xl:p-24"
158+
className="gql-container gql-section flex justify-between gap-4 max-xl:flex-wrap sm:max-xl:gap-y-8 xl:p-24"
159159
onMouseOver={markSector}
160160
onMouseOut={unmarkSector}
161161
onPointerDown={markSector}
162162
>
163-
<div className="shrink">
163+
<div className="basis-full justify-between gap-x-8 sm:max-xl:flex lg:shrink">
164164
<header>
165165
<SectionLabel>Data Colocation</SectionLabel>
166166
<h2 className="typography-h2 mt-6">Data Colocation</h2>
167-
<p className="typography-body-md mt-6 text-pretty xl:max-w-[438px]">
167+
<p className="typography-body-md mt-6 text-pretty lg:max-w-[500px] xl:max-w-[438px]">
168168
GraphQL fragments let you reuse common field selections across
169169
queries, making your code more maintainable and consistent.
170170
</p>
171171
</header>
172172
<ComponentTree
173173
ref={componentTreeRef}
174-
className="mt-6 md:mt-8 lg:mt-12 xl:mt-16"
174+
className="mt-6 max-sm:mx-auto md:mt-8 lg:mt-12 xl:mt-16"
175175
names={[
176176
"Server",
177177
"<FriendList>",
@@ -181,10 +181,10 @@ export function DataColocation() {
181181
/>
182182
</div>
183183
<article
184-
className="flex flex-wrap divide-neu-100 dark:divide-neu-50 dark:shadow-[0_.5px_20px_0_hsl(0_0_0/.25)] max-xl:w-full max-lg:gap-4 lg:shadow-[0_.5px_20px_0_hsl(var(--color-neu-400))] lg:dark:bg-neu-50/10 xl:divide-x xl:rounded-lg"
184+
className="flex divide-neu-100 dark:divide-neu-50 dark:shadow-[0_.5px_20px_0_hsl(0_0_0/.25)] max-xl:w-full max-lg:gap-4 max-md:flex-col lg:rounded-lg lg:shadow-[0_.5px_20px_0_hsl(var(--color-neu-400))] lg:dark:bg-neu-50/10 xl:divide-x"
185185
ref={figureRef}
186186
>
187-
<div className="flex grow flex-col gap-y-4 lg:flex-col-reverse lg:p-4">
187+
<div className="flex grow flex-col gap-y-4 sm:flex-col-reverse lg:p-4">
188188
<FigureInfo />
189189
<div className="sector-ring">
190190
<FriendList friends={json.friends} />

0 commit comments

Comments
 (0)