fix: relation widget style fixes (#911)

packages/core/src/components/common/autocomplete/Autocomplete.css

@@ -1,6 +1,10 @@
 .CMS_Autocomplete_root {
   @apply relative
-    w-full;
+    w-full
+    flex
+    items-center
+    gap-2
+    pr-2;
 
   &.CMS_Autocomplete_disabled {
     & .CMS_Autocomplete_input {
@@ -15,13 +19,19 @@
   }
 }
 
+.CMS_Autocomplete_input-wrapper {
+  @apply flex-grow
+    flex
+    flex-wrap
+    min-w-0;
+}
+
 .CMS_Autocomplete_input {
   @apply w-full
     bg-transparent
     border-none
     py-2
     pl-3
-    pr-10
     text-sm
     leading-5
     focus:ring-0
@@ -33,13 +43,10 @@
 }
 
 .CMS_Autocomplete_button-wrapper {
-  @apply absolute
+  @apply flex
-    inset-y-0
-    right-0
-    flex
     items-center
-    pr-2
+    gap-1
-    gap-1;
+    flex-shrink-0;
 }
 
 .CMS_Autocomplete_button {

packages/core/src/components/common/autocomplete/Autocomplete.tsx

@@ -20,6 +20,7 @@ export const classes = generateClassNames('Autocomplete', [
   'root',
   'focused',
   'disabled',
+  'input-wrapper',
   'input',
   'button-wrapper',
   'button',
@@ -55,6 +56,7 @@ export interface AutocompleteProps {
   disabled?: boolean;
   required?: boolean;
   inputRef?: Ref<HTMLInputElement>;
+  endAdornment?: ReactNode;
   displayValue: (item: string | string[] | null) => string;
   onQuery: (query: string) => void;
   onChange: (value: string | string[] | undefined) => void;
@@ -64,9 +66,10 @@ const Autocomplete = ({
   label,
   value,
   options,
-  inputRef,
   disabled,
   required,
+  inputRef,
+  endAdornment,
   onChange,
   onQuery,
 }: AutocompleteProps) => {
@@ -187,14 +190,17 @@ const Autocomplete = ({
         )}
         data-testid="autocomplete"
       >
-        {label}
+        <div className={classes['input-wrapper']}>
-        <input
+          {label}
-          {...getInputProps()}
+          <input
-          ref={finalInputRef}
+            {...getInputProps()}
-          className={classes.input}
+            ref={finalInputRef}
-          data-testid="autocomplete-input"
+            className={classes.input}
-        />
+            data-testid="autocomplete-input"
+          />
+        </div>
         <div className={classes['button-wrapper']}>
+          {endAdornment}
           <IconButton
             variant="text"
             size="small"

packages/core/src/components/common/progress/CircularProgress.css

@@ -1,6 +1,5 @@
 .CMS_CircularProgress_svg {
-  @apply mr-2
+  @apply text-gray-200
-    text-gray-200
     animate-spin
     dark:text-gray-600
     fill-blue-600;

packages/core/src/styles/main.css

@@ -427,3 +427,12 @@ table {
     height: 24px;
   }
 }
+
+::-moz-focus-inner,
+:focus-visible {
+  @apply outline-none;
+}
+
+.MuiPopper-root {
+  @apply z-[100];
+}

packages/core/src/widgets/relation/RelationControl.css

@@ -7,14 +7,12 @@
     gap-2
     p-2
     pr-0
-    w-relation-widget-label;
+    min-w-0;
 }
 
 .CMS_WidgetRelation_loading {
-  @apply absolute
+  @apply flex
-    inset-y-0
-    right-4
-    flex
     items-center
-    pr-2;
+    w-6
+    h-6;
 }

packages/core/src/widgets/relation/RelationControl.tsx

@@ -358,28 +358,18 @@ const RelationControl: FC<WidgetControlProps<string | string[], RelationField>>
     >
       <Autocomplete
         label={
-          <>
+          Array.isArray(selectedValue) && selectedValue.length > 0 ? (
-            {Array.isArray(selectedValue) && selectedValue.length > 0 ? (
+            <div className={classes.values}>
-              <div className={classes.values}>
+              {selectedValue.map(selectValue => {
-                {selectedValue.map(selectValue => {
+                const option = uniqueOptionsByValue[selectValue];
-                  const option = uniqueOptionsByValue[selectValue];
+                return (
-                  return (
+                  <Pill key={selectValue} noWrap disabled={disabled}>
-                    <Pill key={selectValue} noWrap disabled={disabled}>
+                    {option?.label ?? selectValue}
-                      {option?.label ?? selectValue}
+                  </Pill>
-                    </Pill>
+                );
-                  );
+              })}
-                })}
+            </div>
-              </div>
+          ) : null
-            ) : null}
-            {loading ? (
-              <CircularProgress
-                key="loading-indicator"
-                className={classes.loading}
-                data-testid="relation-loading-indicator"
-                size="small"
-              />
-            ) : null}
-          </>
         }
         inputRef={ref}
         value={selectedValue}
@@ -398,6 +388,16 @@ const RelationControl: FC<WidgetControlProps<string | string[], RelationField>>
 
           return option.label;
         }}
+        endAdornment={
+          loading ? (
+            <CircularProgress
+              key="loading-indicator"
+              className={classes.loading}
+              data-testid="relation-loading-indicator"
+              size="small"
+            />
+          ) : null
+        }
         onQuery={filterOptions}
         onChange={handleChange}
       />

tailwind.base.config.js

@@ -32,7 +32,6 @@ module.exports = {
         "breadcrumb-title": "calc(100vw * .4)",
         "collection-header": "calc(100% - 32px)",
         "date-widget": "calc(100% - 58px)",
-        "relation-widget-label": "calc(100% - 32px)",
         "select-widget-label": "calc(100% - 12px)",
       },
       maxWidth: {