fix: remove width-forcing selectors causing ButtonGroup overflow

The *:[div]:w-full *:[div]:max-w-full selector was forcing all nested
divs to full width, causing ButtonGroup components to overflow their
natural inline-flex layout.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: abdout

src/components/root/components/index.tsx

@@ -20,23 +20,23 @@ import { SpinnerEmpty } from "./spinner-empty"
 export function RootComponents() {
   return (
     <div className="theme-container mx-auto grid gap-8 py-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
+      <div className="flex flex-col gap-6">
         <FieldDemo />
       </div>
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
+      <div className="flex flex-col gap-6">
         <EmptyAvatarGroup />
         <SpinnerBadge />
         <ButtonGroupInputGroup />
         <FieldSlider />
         <InputGroupDemo />
       </div>
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
+      <div className="flex flex-col gap-6">
         <InputGroupButtonExample />
         <ItemDemo />
         <FieldSeparator className="my-4">Appearance Settings</FieldSeparator>
         <AppearanceSettings />
       </div>
-      <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">
+      <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex">
         <NotionPromptForm />
         <ButtonGroupDemo />
         <FieldCheckbox />