fix: workshop UI/UX polish and custom widget table layout

Workshop: fix vote color semantics (primary accent for active state,
contextual score colors), conditional badge positioning, inline delete
confirm, shorter sign-in CTA, comment count on cards, visual anchor
for imageless cards, always-visible gallery nav, footer density polish,
Mantine bg prop for type dot, ghost button back-link.

Custom widgets table: fixed layout with truncation, responsive columns
that hide URL/display on smaller screens to keep name visible.

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx

@@ -75,36 +75,36 @@ export const CustomWidgetList = ({ definitions }: CustomWidgetListProps) => {
 
   return (
     <Stack gap="md">
-      <Table striped highlightOnHover withTableBorder>
+      <Table striped highlightOnHover withTableBorder layout="fixed">
         <Table.Thead>
           <Table.Tr>
             <Table.Th>{t("table.name")}</Table.Th>
-            <Table.Th>{t("table.url")}</Table.Th>
-            <Table.Th>{t("table.display")}</Table.Th>
+            <Table.Th w="30%" visibleFrom="sm">{t("table.url")}</Table.Th>
+            <Table.Th w={120} visibleFrom="xs">{t("table.display")}</Table.Th>
             <Table.Th w={90} />
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>
           {definitions.map((def) => (
             <Table.Tr key={def.id} style={{ opacity: def.enabled ? undefined : 0.5 }}>
-              <Table.Td>
+              <Table.Td style={{ overflow: "hidden" }}>
                 <Group gap="xs" wrap="nowrap">
                   {def.iconUrl ? (
                     <Avatar size={20} radius="sm" src={def.iconUrl} styles={{ image: { objectFit: "contain" } }} />
                   ) : (
-                    <IconApi size={16} />
+                    <IconApi size={16} style={{ flexShrink: 0 }} />
                   )}
-                  <Text size="sm" fw={500} lineClamp={1} c={def.enabled ? undefined : "dimmed"} style={{ minWidth: 0 }}>
+                  <Text size="sm" fw={500} truncate c={def.enabled ? undefined : "dimmed"}>
                     {def.name}
                   </Text>
                 </Group>
               </Table.Td>
-              <Table.Td>
-                <Text size="sm" c="dimmed" lineClamp={1}>
+              <Table.Td style={{ overflow: "hidden" }} visibleFrom="sm">
+                <Text size="sm" c="dimmed" truncate>
                   {def.url}
                 </Text>
               </Table.Td>
-              <Table.Td>
+              <Table.Td visibleFrom="xs">
                 <Badge color={displayTypeBadgeColors[def.displayType] ?? "gray"} size="sm">
                   {t(`displayType.${def.displayType}` as never)}
                 </Badge>

apps/nextjs/src/components/store-install/store-browser-modal.tsx

@@ -177,7 +177,8 @@ const SubmissionCard = ({
           <Box
             w={8}
             h={8}
-            style={{ borderRadius: "50%", flexShrink: 0, backgroundColor: submission.type === "css" ? "var(--mantine-color-blue-5)" : "var(--mantine-color-yellow-5)" }}
+            bg={submission.type === "css" ? "blue.5" : "yellow.5"}
+            style={{ borderRadius: "50%", flexShrink: 0 }}
           />
           <Text fw={600} size="sm" truncate style={{ flex: 1 }}>
             {submission.title}