feat: enhance column width configuration and rendering

- Updated the column width handling in various components to support percentage-based widths, improving layout flexibility.
- Adjusted input fields to enforce minimum and maximum width constraints, ensuring better user experience and preventing layout issues.
- Enhanced the SortableColumnRow and related components to dynamically display width units, allowing for clearer configuration options.

Made-with: Cursor

frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx

@@ -321,6 +321,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                     newColumns[index] = { ...newColumns[index], showInDetail: checked };
                                     updateRightPanel({ columns: newColumns });
                                   }}
+                                  widthUnit="%"
                                 />
                               );
                             })}
@@ -341,7 +342,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                           key={column.columnName}
                           className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
                           onClick={() => {
-                            updateRightPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
+                            updateRightPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 20 }] });
                           }}
                         >
                           <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
@@ -394,7 +395,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                         columns: [...selectedColumns, {
                                           name: matchingJoinColumn.joinAlias,
                                           label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                          width: 100,
+                                          width: 20,
                                           isEntityJoin: true,
                                           joinInfo: {
                                             sourceTable: rightTable!,