Stop vertically aligning your checkboxes with center. Instead use baseline to keep it aligned with the first line of the label text.

label {
  display: flex;
  align-items: center; 
  align-items: baseline; 
}

This was a fun layout challenge for some dashboard UI we’ve been working on at Clerk. The structure of the layout contains your typical sidebar and content elements that live side by side.

Simplified markup example of what we are working with:

<div class="header"></div>
<div class="nav"></div>

<div class="layout">
  <div class="sidebar"></div>
  <div class="content">
    <div class="data"></div>
  </div>
</div>

The data element is a large table which i’ve hard coded to cause an overflow that needs to be able to scroll vertically and horizontally but we wanted to make sure that its scroll bars were always within the viewport.

To accomplish this we can make use of contain: size; to ensure the content overflows within its container and not cause the page to need to scroll.

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header {
  width: 100%;
  height: 56px;
}

.nav {
  width: 100%;
  height: 56px;
  position: sticky;
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
}

.sidebar {...}

.content {
  overflow: auto;
  contain: size;
}

/* This is simply to cause an overflow to demonstrate the table size */
.data {
  width: 200vw;
  height: 200vh;
}

View the demo CodePen here.

const tags = ["HTML", "CSS", "JavaScript"];

{
  new Intl.ListFormat("en-US").formatToParts(tags).map(({ type, value }) => {
    if (type === "element") {
      return <a href={`/${slugify(value)}`}>{value}</a>;
    }
    return value;
  });
}

which returns the following markup:

<a href="/html">HTML</a>, <a href="/css">CSS</a>, and
<a href="/javascript">JavaScript</a>

.element {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-in-out;
}

.element.open {
  grid-template-rows: 1fr;
}

References:

• How to animate an element’s height with CSS grid
• Animating CSS Grid (How To + Examples)

React Aria exposing state through the className is super handy. Here we’re using the placement returned to define a Tailwind CSS variable which we can then use in Motion to define its animation direction. View sandbox example here.

<TooltipTrigger isOpen={open} onOpenChange={setOpen}>
  <Button>Trigger</Button>
  <AnimatePresence>
    {open ? (
      <MotionTooltip
        className={({ placement }) =>
          cx({
            "[--y:4px]": placement === "top",
            "[--y:-4px]": placement === "bottom",
          })
        }
        offset={6}
        initial={{ opacity: 0, y: "var(--y)" }}
        animate={{ opacity: 1, y: 0 }}
      >
        Content
      </MotionTooltip>
    ) : null}
  </AnimatePresence>
</TooltipTrigger>