From f903649faab805cce425cd6da960580c67c373ed Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 23 Jun 2023 11:20:18 +0200
Subject: [PATCH] fix(ui): move flag description

---
 .../app/components/FFlags/FFlagItem/FFlagItem.tsx   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/FFlags/FFlagItem/FFlagItem.tsx b/frontend/app/components/FFlags/FFlagItem/FFlagItem.tsx
index d56a5a101..d94d9dd7c 100644
--- a/frontend/app/components/FFlags/FFlagItem/FFlagItem.tsx
+++ b/frontend/app/components/FFlags/FFlagItem/FFlagItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import FeatureFlag from 'App/mstore/types/FeatureFlag'
-import { Icon, Toggler, Link } from 'UI'
+import { Icon, Toggler, Link, TextEllipsis } from 'UI'
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { resentOrDate } from 'App/date';
@@ -28,9 +28,15 @@ function FFlagItem({ flag }: { flag: FeatureFlag }) {
     <div className={'w-full py-2 px-6 border-b'}>
       <div className={'flex items-center'}>
         <Link style={{ flex: 1 }} to={`feature-flags/${flag.featureFlagId}`}>
-          <div className={'flex items-center gap-2 link'}>
+          <div className={'flex items-center gap-2'}>
             <Icon name={flagIcon} size={32} />
-            {flag.flagKey}
+            <div className="flex flex-col gap-2" style={{ width: 200 }}>
+              <span className={'link'}>{flag.flagKey}</span>
+              {flag.description
+                ? (
+                    <TextEllipsis hintText={flag.description} text={flag.description} className={'text-disabled-text !no-underline'} />
+                  ) : null}
+            </div>
           </div>
         </Link>
         <div style={{ flex: 1 }}>{flag.isSingleOption ? 'Single Variant' : 'Multivariant'}</div>
@@ -48,7 +54,6 @@ function FFlagItem({ flag }: { flag: FeatureFlag }) {
           />
         </div>
       </div>
-      {flag.description ? <div className={'text-disabled-text pt-2'}>{flag.description}</div> : null}
     </div>
   );
 }