fix: general ui layout sizing and spacing #4487
Conversation
norbert-mieczkowski-codilime
requested review from
bryanculver,
jathanism,
glennmatthews,
gsnider2195 and
timizuoebideri1
| @@ -21,47 +22,63 @@ import { humanFriendlyDate } from "@utils/date"; | |||
|
|
|||
| export default function RenderHeader({ data }) { | |||
| return ( | |||
| <Box display="flex" justifyContent="space-between" padding="md"> | |||
| <Heading display="flex" alignItems="center" gap="5px"> | |||
| <Flex justify="space-between"> | |||
There was a problem hiding this comment.
Should we be using Flex instead of Box from now on? What are the differences?
There was a problem hiding this comment.
The difference between Flex and Box is esentially that Box has, by default, display: block;, whereas Flex has display: flex;. Outside (i.e. for their immediate parents) block and flex are the same, but inside, their children flow is fundamentally different. MDN can offer more detailed explanation: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
| <Tabs> | ||
| <TabList pl="md"> | ||
| <Tabs variant="outline"> | ||
| <TabList marginX={negateCssVar("md")} paddingX="md"> |
There was a problem hiding this comment.
Can you offer a short explanation for negateCssVar?
There was a problem hiding this comment.
If raw values were used, negation would be as simple as adding a - sign in front of a number (e.g. -20px). However, in case of space tokens (which resolve to CSS custom properties), such as xs, sm, md, etc., the negation needs to be somewhat more sophisticated. So what negateCssVar does is, it takes space token and multiplies it by -1 with CSS calc function. To put it simple, you can think of negateCssVar("md") as something like -md or md * -1. In reality it is calc(var(--chakra-space-md) * -1).
…eneral-ui-layout-sizing-and-spacing
bryanculver
deleted the
u/norbert-mieczkowski-codilime-4458-fix-general-ui-layout-sizing-and-spacing
branch
Closes: #4458
What's Changed
Fix general UI layout sizing and spacing on Home (
Home), List (ObjectList) and Object (ObjectRetrieve) views.Home)ObjectList)ObjectRetrieve)