Adjust file upload file width (#1426)

## FileUpload - files width

Removes implicit width from files in `<FileUpload>`. These now span the
maximum width of the widest filename, while also respecting max-width of
any container.

Also changes alignment of the delete button for files in `<FileUpload>`
from center to top.

<img width="1538" height="485" alt="Screenshot 2025-09-23 at 14 42 45"
src="https://github.com/user-attachments/assets/d62227fe-93ff-46e5-966a-13ac0df006e3"
/>

Author: oscarcarlstrom

.changeset/clean-dragons-push.md

@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-react": patch
+---
+
+Changes alignment of the delete button for files in `<FileUpload>` from center to top.

.changeset/twenty-glasses-shake.md

@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-react": patch
+---
+
+Removes implicit width from files in `<FileUpload>`. These now span the maximum width of the widest filename, while also respecting max-width of any container.

packages/react/src/file-upload/file-upload.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof FileUpload> = {
   },
   render: () => {
     return (
-      <div className="p-4">
+      <div className="container p-4">
         <FileUpload>
           <Label>Last opp fil</Label>
           <Description>Du kan laste opp én fil.</Description>
@@ -35,7 +35,7 @@ export const FileUploadStory: Story = {
 export const AllowsMultiple: Story = {
   render: () => {
     return (
-      <div className="p-4">
+      <div className="container p-4">
         <FileUpload allowsMultiple>
           <Label>Last opp filer</Label>
           <Description>
@@ -51,7 +51,7 @@ export const AllowsMultiple: Story = {
 export const LimitFileTypes: Story = {
   render: () => {
     return (
-      <div className="p-4">
+      <div className="w-72 max-w-full p-4">
         <FileUpload acceptedFileTypes={['.pdf']}>
           <Label>Last opp PDF</Label>
           <Description>Du kan kun laste opp én PDF.</Description>
@@ -65,7 +65,7 @@ export const LimitFileTypes: Story = {
 export const AcceptDirectory: Story = {
   render: () => {
     return (
-      <div className="p-4">
+      <div className="w-72 max-w-full p-4">
         <FileUpload acceptDirectory>
           <Label>Last opp mappe</Label>
           <Description>Du kan laste opp en mappe.</Description>
@@ -80,7 +80,7 @@ export const Controlled: Story = {
   render: () => {
     const [files, setFiles] = useState<File[]>([]);
     return (
-      <div className="p-4">
+      <div className="w-72 max-w-full p-4">
         <FileUpload files={files} onChange={setFiles} allowsMultiple>
           <Label>Last opp filer</Label>
           <Description>Du kan laste opp flere filer.</Description>
@@ -97,7 +97,7 @@ export const Required: Story = {
     return (
       <form
         encType="multipart/form-data"
-        className="flex flex-col items-start gap-4 p-4"
+        className="flex w-72 max-w-full flex-col items-start gap-4 p-4"
         onSubmit={(e) => {
           e.preventDefault();
           const formData = new FormData(e.target as HTMLFormElement);
@@ -126,7 +126,7 @@ export const Required: Story = {
 export const Validation: Story = {
   render: () => {
     return (
-      <div className="p-4">
+      <div className="w-72 max-w-full p-4">
         <FileUpload
           validate={(file) => file.size < 1000000 || 'Filen er for stor'}
         >
@@ -141,7 +141,7 @@ export const Validation: Story = {
 
 export const InForm = () => (
   <form
-    className="flex flex-col items-start gap-4 p-4"
+    className="flex w-72 max-w-full flex-col items-start gap-4 p-4"
     encType="multipart/form-data"
     onSubmit={(e) => {
       e.preventDefault();

packages/react/src/file-upload/file-upload.tsx

@@ -217,7 +217,7 @@ const FileUpload = ({
     <Provider values={[[FieldErrorContext, displayValidation]]}>
       <div
         data-slot="file-upload"
-        className="group grid w-72 max-w-full gap-2"
+        className="group grid gap-2"
         data-required={isRequired}
       >
         <Provider
@@ -273,7 +273,7 @@ const FileUpload = ({
           </FileTrigger>
         </Provider>
         {controlledOrUncontrolledFiles.length > 0 && (
-          <ul className="mt-4 grid gap-y-2">
+          <ul className="mt-4 grid max-w-fit gap-y-2">
             {controlledOrUncontrolledFiles.map((file, fileIndex) => {
               let fileName = file.name;
               if (
@@ -296,9 +296,10 @@ const FileUpload = ({
                         : 'border-gray bg-gray-lightest',
                     )}
                   >
-                    {fileName}{' '}
+                    {fileName}
                     <button
                       className={cx(
+                        'self-start',
                         '-m-2 grid h-11 w-11 shrink-0 cursor-pointer place-items-center rounded-xl',
                         // Focus styles
                         'focus-visible:-outline-offset-8 focus-visible:outline-focus',