Updated styling of goals report.

src/app/(main)/reports/[reportId]/ParameterList.module.css

@@ -6,11 +6,24 @@
 
 .item {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  flex-wrap: nowrap;
   padding: 12px;
   border: 1px solid var(--base400);
   border-radius: var(--border-radius);
   box-shadow: 1px 1px 1px var(--base400);
 }
+
+.value {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  flex: 1;
+}
+
+.icon,
+.close {
+  height: 1.5rem;
+}

src/app/(main)/reports/[reportId]/ParameterList.tsx

@@ -24,18 +24,21 @@ export function ParameterList({ children }: ParameterListProps) {
 const Item = ({
   children,
   className,
+  icon,
   onClick,
   onRemove,
 }: {
   children?: ReactNode;
   className?: string;
+  icon?: ReactNode;
   onClick?: () => void;
   onRemove?: () => void;
 }) => {
   return (
     <div className={classNames(styles.item, className)} onClick={onClick}>
-      {children}
-      <Icon onClick={onRemove}>
+      {icon && <Icon className={styles.icon}>{icon}</Icon>}
+      <div className={styles.value}>{children}</div>
+      <Icon className={styles.close} onClick={onRemove}>
         <Icons.Close />
       </Icon>
     </div>