@@ -155,23 +155,23 @@ export function DataColocation() {
155
155
return (
156
156
< section
157
157
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"
159
159
onMouseOver = { markSector }
160
160
onMouseOut = { unmarkSector }
161
161
onPointerDown = { markSector }
162
162
>
163
- < div className = "shrink" >
163
+ < div className = "basis-full justify-between gap-x-8 sm:max-xl:flex lg: shrink" >
164
164
< header >
165
165
< SectionLabel > Data Colocation</ SectionLabel >
166
166
< 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]" >
168
168
GraphQL fragments let you reuse common field selections across
169
169
queries, making your code more maintainable and consistent.
170
170
</ p >
171
171
</ header >
172
172
< ComponentTree
173
173
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"
175
175
names = { [
176
176
"Server" ,
177
177
"<FriendList>" ,
@@ -181,10 +181,10 @@ export function DataColocation() {
181
181
/>
182
182
</ div >
183
183
< 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"
185
185
ref = { figureRef }
186
186
>
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" >
188
188
< FigureInfo />
189
189
< div className = "sector-ring" >
190
190
< FriendList friends = { json . friends } />
0 commit comments