fix outline being cut off four stream tags

Author: MichaelMuenzenhofer

src/components/streamFeed/StreamChannel.tsx

@@ -82,7 +82,8 @@ const StreamChannel: FC<StreamChannelProps> = ({ testid, user_name }) => {
 
     return (
         <button
-            className="text-slate-300 text-left max-w-full text-ellipsis whitespace-nowrap overflow-hidden font-medium text-base lg:text-lg rounded-md pr-1 pseudo-zinc-purple streamfeed streamchannel"
+            className="text-slate-300 text-left max-w-full text-ellipsis whitespace-nowrap overflow-hidden
+            font-medium text-base lg:text-lg rounded-md px-1 pseudo-zinc-purple streamfeed streamchannel"
             onClick={handleClick}
             title={user_name}
             data-testid={testid}

src/components/streamFeed/StreamFeed.tsx

@@ -370,7 +370,10 @@ const StreamFeed = () => {
                                     data-testid={`streamfeed-article-${index}`}
                                 >
                                     <div className={`rounded-xl ${bgColor}`}>
-                                        <section className="relative transform transition duration-150 ease-in-out hover:translate-x-2 hover:-translate-y-2">
+                                        <section
+                                            className="relative transform transition duration-150 ease-in-out
+                                            hover:translate-x-2 hover:-translate-y-2"
+                                        >
                                             <StreamThumbnail
                                                 thumbnail_url={
                                                     item.thumbnail_url
@@ -416,7 +419,7 @@ const StreamFeed = () => {
                                                 key={`${item.user_id} - game`}
                                                 testid={`streamfeed-game-${index}`}
                                             />
-                                            <div className="flex flex-wrap w-full max-h-20 overflow-auto">
+                                            <div className="flex flex-wrap w-full max-h-20 overflow-auto pl-2 -ml-2">
                                                 {item.tags.map((tag, index) => (
                                                     <StreamTags
                                                         item={tag}

src/components/streamFeed/StreamGame.tsx

@@ -81,7 +81,8 @@ const StreamGame: FC<StreamGameProps> = ({ game_name, testid }) => {
     }
     return (
         <button
-            className="text-slate-300 text-left max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-sm lg:text-base rounded-md pr-1 pseudo-zinc-purple streamfeed streamgame"
+            className="text-slate-300 text-left max-w-full text-ellipsis whitespace-nowrap overflow-hidden
+            text-sm lg:text-base rounded-md px-1 pseudo-zinc-purple streamfeed streamgame"
             onClick={handleClick}
             title={game_name}
             data-testid={testid}

src/components/streamFeed/StreamTags.tsx

@@ -82,7 +82,8 @@ const StreamTags: FC<StreamTagsProps> = ({ item, testid }) => {
 
     return (
         <button
-            className="bg-gray-600 text-slate-50 text-left max-w-full text-ellipsis whitespace-nowrap overflow-hidden px-2 rounded-md mr-1 my-1 text-sm lg:text-base pseudo-zinc-secondary streamfeed streamtag"
+            className="bg-gray-600 text-slate-50 text-left max-w-full text-ellipsis whitespace-nowrap overflow-hidden
+            px-2 rounded-md mr-2 my-1 text-sm lg:text-base pseudo-zinc-secondary streamfeed streamtag"
             onClick={handleClick}
             title={item}
             data-testid={testid}