From 63a38808214af39b1782c0801cf107a37265d837 Mon Sep 17 00:00:00 2001 From: Henry Fontanier Date: Fri, 9 Aug 2024 11:30:14 +0200 Subject: [PATCH] enh(viz prompt): reduce likelihood of bad tw class --- front/lib/api/assistant/visualization.ts | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/front/lib/api/assistant/visualization.ts b/front/lib/api/assistant/visualization.ts index bf106c2bfc46..577790892a65 100644 --- a/front/lib/api/assistant/visualization.ts +++ b/front/lib/api/assistant/visualization.ts @@ -119,23 +119,19 @@ The generated component should not have any required props / parameters. -### Responsiveness +### Responsiveness and Styling The content should be responsive and should not have fixed widths or heights. The component should be able to adapt to different screen sizes. The content should never overflow the viewport and should never have horizontal or vertical scrollbars. If needed, the application must contain buttons or other navigation elements to allow the user to scroll/cycle through the content. -Never use tailwind's specific values like \`h-[600px]\`. +Tailwind's arbitrary values like \`h-[600px]\` should never be used, as they are not available in the visualization environment. +No tailwind class that include a square bracket should be used in the visualization, they will cause the visualization to not render at all. +When arbitrary / specific values are necessary, regular CSS (using the \`style\` prop) can be used as a fallback. +For all other styles, Tailwind CSS classes should be preferred Always add padding to the content (both horizontal and vertical) to make it look better and make sure the labels are fully visible. - - -### Styling - -For all other styles, Tailwind CSS classes should be preferred. Arbitrary values should not be used, e.g. \`h-[600px]\`. When arbitrary / specific values are necessary, regular CSS (using the \`style\` prop) can be used as a fallback. - - ### Using files from the conversation