Repository: supabase/supabase
File: apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx (TypeScript)

Code before:
                                ? 'Must be between 1–63 characters and unique within this table.'
                                : undefined
                            }
                            layout="vertical"
                          >
                            <FormControl_Shadcn_>
                              <Input_Shadcn_
                                {...field}
                                value={field.value}
                                size="small"
                                className="w-full"
                                placeholder="Enter a metadata key name"
                                data-1p-ignore
                                data-lpignore="true"
                                data-form-type="other"
                                data-bwignore
                              />
                            </FormControl_Shadcn_>
                          </FormItemLayout>
                        )}
                      />
                    </div>
                    <Button
                      type="text"
                      className="w-[34px] h-[34px]" // Match the height of the input
                      size="tiny"
                      icon={<Trash2 size={12} />}
                      onClick={() => remove(index)}
                    />
                  </div>
                ))}
              </div>
              <div className="flex items-center justify-center rounded border border-strong border-dashed py-3">
                <Button type="default" size="tiny" onClick={() => append({ value: '' })}>
                  Add metadata key
                </Button>
              </div>
            </SheetSection>
          </form>
        </Form_Shadcn_>

        <SheetFooter>
          <Button type="default" disabled={isCreating} onClick={() => setVisible(false)}>
            Cancel
          </Button>
          <Button
            form={formId}
            htmlType="submit"
            loading={isCreating}
            disabled={isCreating || !bucketName}
          >

Review comment (suggestion):
Necessary changes to add `description` (via `FormItemLayout`).

I believe `FormMessage_Shadcn_` can be removed because `FormItemLayout` handles the error validation. You can see this if you try to submit the form with an empty metadata key.

Code after:
                          <FormItemLayout
                            name={`metadataKeys.${index}.value`}
                            description={
                              index === fields.length - 1
                                ? 'Must be between 1–63 characters and unique within this table.'
                                : undefined
                            }
                            layout="vertical"
                          >
                            <FormControl_Shadcn_>
                              <Input_Shadcn_
                                {...field}
                                value={field.value}
                                size="small"
                                className="w-full"
                                placeholder="Enter a metadata key name"
                                data-1p-ignore
                                data-lpignore="true"
                                data-form-type="other"
                                data-bwignore
                              />
                            </FormControl_Shadcn_>
                          </FormItemLayout>
                        )}
                      />
                    </div>
                    <Button
                      type="text"
                      className="w-[34px] h-[34px]" // Match the height of the input
                      size="tiny"
                      icon={<Trash2 size={12} />}
                      onClick={() => remove(index)}
                    />
                  </div>
                ))}
              </div>
              <div className="flex items-center justify-center rounded border border-strong border-dashed py-3">
                <Button type="default" size="tiny" onClick={() => append({ value: '' })}>
                  Add metadata key
                </Button>
              </div>
            </SheetSection>
          </form>
        </Form_Shadcn_>

        <SheetFooter>
          <Button type="default" disabled={isCreating} onClick={() => setVisible(false)}>
            Cancel
          </Button>
          <Button
            form={formId}