From 970f4f9ae603196a92263dbd724081e2cf33fc3e Mon Sep 17 00:00:00 2001
From: Michael <michael.myers@goteleport.com>
Date: Mon, 16 Dec 2024 08:46:15 -0600
Subject: [PATCH] [v16] Add gap in Bots permissions banner (#50257)

The old text was a little squished. The new banners dont have this
problem but the old ones in v16 need a little help
---
 web/packages/teleport/src/Bots/List/Bots.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/packages/teleport/src/Bots/List/Bots.tsx b/web/packages/teleport/src/Bots/List/Bots.tsx
index ed9e42bfc019f..84e68d4dddbe7 100644
--- a/web/packages/teleport/src/Bots/List/Bots.tsx
+++ b/web/packages/teleport/src/Bots/List/Bots.tsx
@@ -20,7 +20,7 @@ import React, { useEffect, useState } from 'react';
 import { useAttemptNext } from 'shared/hooks';
 import { Link } from 'react-router-dom';
 import { HoverTooltip } from 'shared/components/ToolTip';
-import { Alert, Box, ButtonPrimary, Indicator } from 'design';
+import { Alert, Flex, Box, ButtonPrimary, Indicator, Text } from 'design';
 
 import {
   FeatureBox,
@@ -129,8 +129,10 @@ export function Bots() {
       <FeatureBox>
         {!canListBots && (
           <Alert kind="info" mt={4}>
-            You do not have permission to access Bots. Missing role permissions:{' '}
-            <code>bot.list</code>
+            <Flex gap={1}>
+              You do not have permission to access Bots. Missing role
+              permissions: <Text bold>bot.list</Text>
+            </Flex>
           </Alert>
         )}
         <EmptyState />