From 19228806e096b46c9ac0d08a1ab6e478e9911f97 Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Sat, 14 Dec 2024 13:16:14 -0500
Subject: [PATCH 1/5] chore: have flags/segments take up more horizontal space

Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com>
---
 ui/src/app/flags/Flag.tsx          | 151 ++++++--------
 ui/src/app/flags/NewFlag.tsx       |  25 +--
 ui/src/app/segments/NewSegment.tsx |  25 +--
 ui/src/app/segments/Segment.tsx    | 319 +++++++++++++----------------
 ui/src/components/MoreInfo.tsx     |  10 +-
 5 files changed, 224 insertions(+), 306 deletions(-)

diff --git a/ui/src/app/flags/Flag.tsx b/ui/src/app/flags/Flag.tsx
index 05c1c8f735..a33de2bdaa 100644
--- a/ui/src/app/flags/Flag.tsx
+++ b/ui/src/app/flags/Flag.tsx
@@ -155,98 +155,71 @@ export default function Flag() {
           ]}
         />
       </PageHeader>
-      <div className="flex items-center justify-between">
-        <div className="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
-          <div
-            title={inTimezone(flag.createdAt)}
-            className="mt-2 flex items-center text-sm text-gray-500"
-          >
-            <CalendarIcon
-              className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
-              aria-hidden="true"
-            />
-            Created{' '}
-            {formatDistanceToNowStrict(parseISO(flag.createdAt), {
-              addSuffix: true
-            })}
-          </div>
+
+      {/* Info Section */}
+      <div className="mb-8 space-y-4">
+        <div className="flex items-center text-sm text-gray-500">
+          <CalendarIcon className="mr-1.5 h-5 w-5 text-gray-400" />
+          Created{' '}
+          {formatDistanceToNowStrict(parseISO(flag.createdAt), {
+            addSuffix: true
+          })}
         </div>
+
+        <MoreInfo href="https://www.flipt.io/docs/concepts#flags">
+          Learn more about flags
+        </MoreInfo>
       </div>
 
-      <div className="flex flex-col">
-        {/* flag details */}
-        <div className="my-5">
-          <div className="md:grid md:grid-cols-3 md:gap-6">
-            <div className="md:col-span-1">
-              <p className="mt-1 text-sm text-gray-500">
-                Basic information about the flag and its status.
-              </p>
-              <MoreInfo
-                className="mt-5"
-                href="https://www.flipt.io/docs/concepts#flags"
-              >
-                Learn more about flags
-              </MoreInfo>
-            </div>
-            <div className="mt-5 md:col-span-2 md:mt-0">
-              <FlagForm flag={flag} />
-            </div>
-          </div>
-        </div>
-        <>
-          <div className="mt-3 flex flex-row sm:mt-5">
-            <div className="border-b-2 border-gray-200">
-              <nav className="-mb-px flex space-x-8">
-                {flag.type === FlagType.VARIANT ? (
-                  <>
-                    {variantFlagTabs.map((tab) => (
-                      <NavLink
-                        end
-                        key={tab.name}
-                        to={tab.to}
-                        className={({ isActive }) =>
-                          cls(
-                            'whitespace-nowrap border-b-2 px-1 py-2 font-medium',
-                            {
-                              'border-violet-500 text-violet-600': isActive,
-                              'border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-700':
-                                !isActive
-                            }
-                          )
-                        }
-                      >
-                        {tab.name}
-                      </NavLink>
-                    ))}
-                  </>
-                ) : (
-                  <>
-                    {booleanFlagTabs.map((tab) => (
-                      <NavLink
-                        end
-                        key={tab.name}
-                        to={tab.to}
-                        className={({ isActive }) =>
-                          cls(
-                            'whitespace-nowrap border-b-2 px-1 py-2 font-medium',
-                            {
-                              'border-violet-500 text-violet-600': isActive,
-                              'border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-700':
-                                !isActive
-                            }
-                          )
-                        }
-                      >
-                        {tab.name}
-                      </NavLink>
-                    ))}
-                  </>
-                )}
-              </nav>
-            </div>
-          </div>
-          <Outlet context={{ flag }} />
-        </>
+      {/* Form Section - Full Width */}
+      <div className="mb-8">
+        <FlagForm flag={flag} />
+      </div>
+
+      {/* Tabs Section */}
+      <div className="mt-3">
+        <nav className="space-x-4 border-b border-gray-200">
+          {flag.type === FlagType.VARIANT ? (
+            <>
+              {variantFlagTabs.map((tab) => (
+                <NavLink
+                  end
+                  key={tab.name}
+                  to={tab.to}
+                  className={({ isActive }) =>
+                    cls('whitespace-nowrap border-b-2 px-1 py-2 font-medium', {
+                      'border-violet-500 text-violet-600': isActive,
+                      'border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-700':
+                        !isActive
+                    })
+                  }
+                >
+                  {tab.name}
+                </NavLink>
+              ))}
+            </>
+          ) : (
+            <>
+              {booleanFlagTabs.map((tab) => (
+                <NavLink
+                  end
+                  key={tab.name}
+                  to={tab.to}
+                  className={({ isActive }) =>
+                    cls('whitespace-nowrap border-b-2 px-1 py-2 font-medium', {
+                      'border-violet-500 text-violet-600': isActive,
+                      'border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-700':
+                        !isActive
+                    })
+                  }
+                >
+                  {tab.name}
+                </NavLink>
+              ))}
+            </>
+          )}
+        </nav>
+        <Outlet context={{ flag }} />
       </div>
     </>
   );
diff --git a/ui/src/app/flags/NewFlag.tsx b/ui/src/app/flags/NewFlag.tsx
index 4962993777..b18b95c1d6 100644
--- a/ui/src/app/flags/NewFlag.tsx
+++ b/ui/src/app/flags/NewFlag.tsx
@@ -6,23 +6,14 @@ export default function NewFlag() {
   return (
     <>
       <PageHeader title="New Flag" />
-      <div className="my-6">
-        <div className="md:grid md:grid-cols-3 md:gap-6">
-          <div className="md:col-span-1">
-            <p className="mt-2 text-sm text-gray-500">
-              Basic information about the flag and its status.
-            </p>
-            <MoreInfo
-              className="mt-5"
-              href="https://www.flipt.io/docs/concepts#flags"
-            >
-              Learn more about flags
-            </MoreInfo>
-          </div>
-          <div className="mt-5 md:col-span-2 md:mt-0">
-            <FlagForm />
-          </div>
-        </div>
+      <div className="mb-8 space-y-4">
+        <MoreInfo href="https://www.flipt.io/docs/concepts#flags">
+          Learn more about flags
+        </MoreInfo>
+      </div>
+
+      <div className="mb-8">
+        <FlagForm />
       </div>
     </>
   );
diff --git a/ui/src/app/segments/NewSegment.tsx b/ui/src/app/segments/NewSegment.tsx
index 6b3a592e99..7f54149c22 100644
--- a/ui/src/app/segments/NewSegment.tsx
+++ b/ui/src/app/segments/NewSegment.tsx
@@ -6,23 +6,14 @@ export default function NewSegment() {
   return (
     <>
       <PageHeader title="New Segment" />
-      <div className="my-6">
-        <div className="md:grid md:grid-cols-3 md:gap-6">
-          <div className="md:col-span-1">
-            <p className="mt-2 text-sm text-gray-500">
-              Basic information about the segment.
-            </p>
-            <MoreInfo
-              className="mt-5"
-              href="https://www.flipt.io/docs/concepts#segments"
-            >
-              Learn more about segmentation
-            </MoreInfo>
-          </div>
-          <div className="mt-5 md:col-span-2 md:mt-0">
-            <SegmentForm />
-          </div>
-        </div>
+      <div className="mb-8 space-y-4">
+        <MoreInfo href="https://www.flipt.io/docs/concepts#segments">
+          Learn more about segments
+        </MoreInfo>
+      </div>
+
+      <div className="mb-8">
+        <SegmentForm />
       </div>
     </>
   );
diff --git a/ui/src/app/segments/Segment.tsx b/ui/src/app/segments/Segment.tsx
index e9c167fdcd..51d8bf2213 100644
--- a/ui/src/app/segments/Segment.tsx
+++ b/ui/src/app/segments/Segment.tsx
@@ -215,7 +215,6 @@ export default function Segment() {
         />
       </Modal>
 
-      {/* segment header / delete button */}
       <PageHeader title={segment.name}>
         <Dropdown
           label="Actions"
@@ -238,188 +237,158 @@ export default function Segment() {
           ]}
         />
       </PageHeader>
-      <div className="flex items-center justify-between">
-        <div className="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
-          <div
-            title={inTimezone(segment.createdAt)}
-            className="mt-2 flex items-center text-sm text-gray-500"
-          >
-            <CalendarIcon
-              className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
-              aria-hidden="true"
-            />
-            Created{' '}
-            {formatDistanceToNowStrict(parseISO(segment.createdAt), {
-              addSuffix: true
-            })}
-          </div>
+
+      <div className="mb-8 space-y-4">
+        <div className="flex items-center text-sm text-gray-500">
+          <CalendarIcon className="mr-1.5 h-5 w-5 text-gray-400" />
+          Created{' '}
+          {formatDistanceToNowStrict(parseISO(segment.createdAt), {
+            addSuffix: true
+          })}
         </div>
+
+        <MoreInfo href="https://www.flipt.io/docs/concepts#segments">
+          Learn more about segments
+        </MoreInfo>
       </div>
 
-      <div className="flex flex-col">
-        {/* segment details */}
-        <div className="b-5">
-          <div className="md:grid md:grid-cols-3 md:gap-6">
-            <div className="md:col-span-1">
-              <p className="mt-1 text-sm text-gray-500">
-                Basic information about the segment
-              </p>
-              <MoreInfo
-                className="mt-5"
-                href="https://www.flipt.io/docs/concepts#segments"
+      <div className="mb-8">
+        <SegmentForm segment={segment} />
+      </div>
+
+      <div>
+        <div className="sm:flex sm:items-center">
+          <div className="sm:flex-auto">
+            <h3 className="font-medium leading-6 text-gray-900">Constraints</h3>
+            <p className="mt-1 text-sm text-gray-500">
+              Determine if a request matches a segment
+            </p>
+          </div>
+          {segment.constraints && segment.constraints.length > 0 && (
+            <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+              <Button
+                variant="primary"
+                type="button"
+                disabled={readOnly}
+                title={readOnly ? 'Not allowed in Read-Only mode' : undefined}
+                onClick={() => {
+                  setEditingConstraint(null);
+                  setShowConstraintForm(true);
+                }}
               >
-                Learn more about segments
-              </MoreInfo>
+                New Constraint
+              </Button>
             </div>
-            <div className="mt-5 md:col-span-2 md:mt-0">
-              <SegmentForm segment={segment} />
-            </div>
-          </div>
+          )}
         </div>
 
-        {/* constraints */}
-        <div className="mt-10">
-          <div>
-            <div className="sm:flex sm:items-center">
-              <div className="sm:flex-auto">
-                <h3 className="font-medium leading-6 text-gray-900">
-                  Constraints
-                </h3>
-                <p className="mt-1 text-sm text-gray-500">
-                  Determine if a request matches a segment
-                </p>
-              </div>
-              {segment.constraints && segment.constraints.length > 0 && (
-                <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-                  <Button
-                    variant="primary"
-                    type="button"
-                    disabled={readOnly}
-                    title={
-                      readOnly ? 'Not allowed in Read-Only mode' : undefined
-                    }
-                    onClick={() => {
-                      setEditingConstraint(null);
-                      setShowConstraintForm(true);
-                    }}
+        <div className="my-10">
+          {segment.constraints && segment.constraints.length > 0 ? (
+            <table className="min-w-full divide-y divide-gray-300">
+              <thead>
+                <tr>
+                  <th
+                    scope="col"
+                    className="pb-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
                   >
-                    New Constraint
-                  </Button>
-                </div>
-              )}
-            </div>
-            <div className="my-10">
-              {segment.constraints && segment.constraints.length > 0 ? (
-                <table className="min-w-full divide-y divide-gray-300">
-                  <thead>
-                    <tr>
-                      <th
-                        scope="col"
-                        className="pb-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
-                      >
-                        Property
-                      </th>
-                      <th
-                        scope="col"
-                        className="hidden px-3 pb-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
-                      >
-                        Type
-                      </th>
-                      <th
-                        scope="col"
-                        className="hidden px-3 pb-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
-                      >
-                        Operator
-                      </th>
-                      <th
-                        scope="col"
-                        className="hidden px-3 pb-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
-                      >
-                        Value
-                      </th>
-                      <th
-                        scope="col"
-                        className="hidden px-3 pb-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
-                      >
-                        Description
-                      </th>
-                      <th
-                        scope="col"
-                        className="relative pb-3.5 pl-3 pr-4 sm:pr-6"
-                      >
-                        <span className="sr-only">Edit</span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-gray-200">
-                    {segment.constraints.map((constraint) => (
-                      <tr key={constraint.id}>
-                        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-600 sm:pl-6">
-                          {constraint.property}
-                        </td>
-                        <td className="hidden whitespace-nowrap px-3 py-4 text-sm text-gray-500 sm:table-cell">
-                          {constraintTypeToLabel(constraint.type)}
-                        </td>
-                        <td className="hidden whitespace-nowrap px-3 py-4 text-sm text-gray-500 lg:table-cell">
-                          {ConstraintOperators[constraint.operator]}
-                        </td>
-                        <td className="hidden whitespace-normal px-3 py-4 text-sm text-gray-500 lg:table-cell">
-                          <ConstraintValue constraint={constraint} />
-                        </td>
-                        <td className="hidden truncate whitespace-nowrap px-3 py-4 text-sm text-gray-500 lg:table-cell">
-                          {constraint.description}
-                        </td>
-                        <td className="whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-                          {!readOnly && (
-                            <>
-                              <a
-                                href="#"
-                                className="pr-2 text-violet-600 hover:text-violet-900"
-                                onClick={(e) => {
-                                  e.preventDefault();
-                                  setEditingConstraint(constraint);
-                                  setShowConstraintForm(true);
-                                }}
-                              >
-                                Edit
-                                <span className="sr-only">
-                                  , {constraint.property}
-                                </span>
-                              </a>
-                              <span aria-hidden="true"> | </span>
-                              <a
-                                href="#"
-                                className="pl-2 text-violet-600 hover:text-violet-900"
-                                onClick={(e) => {
-                                  e.preventDefault();
-                                  setDeletingConstraint(constraint);
-                                  setShowDeleteConstraintModal(true);
-                                }}
-                              >
-                                Delete
-                                <span className="sr-only">
-                                  , {constraint.property}
-                                </span>
-                              </a>
-                            </>
-                          )}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              ) : (
-                <EmptyState
-                  text="New Constraint"
-                  disabled={readOnly}
-                  onClick={() => {
-                    setEditingConstraint(null);
-                    setShowConstraintForm(true);
-                  }}
-                />
-              )}
-            </div>
-          </div>
+                    Property
+                  </th>
+                  <th
+                    scope="col"
+                    className="hidden px-3 pb-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+                  >
+                    Type
+                  </th>
+                  <th
+                    scope="col"
+                    className="hidden px-3 pb-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
+                  >
+                    Operator
+                  </th>
+                  <th
+                    scope="col"
+                    className="hidden px-3 pb-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
+                  >
+                    Value
+                  </th>
+                  <th
+                    scope="col"
+                    className="hidden px-3 pb-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
+                  >
+                    Description
+                  </th>
+                  <th scope="col" className="relative pb-3.5 pl-3 pr-4 sm:pr-6">
+                    <span className="sr-only">Edit</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {segment.constraints.map((constraint) => (
+                  <tr key={constraint.id}>
+                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-600 sm:pl-6">
+                      {constraint.property}
+                    </td>
+                    <td className="hidden whitespace-nowrap px-3 py-4 text-sm text-gray-500 sm:table-cell">
+                      {constraintTypeToLabel(constraint.type)}
+                    </td>
+                    <td className="hidden whitespace-nowrap px-3 py-4 text-sm text-gray-500 lg:table-cell">
+                      {ConstraintOperators[constraint.operator]}
+                    </td>
+                    <td className="hidden whitespace-normal px-3 py-4 text-sm text-gray-500 lg:table-cell">
+                      <ConstraintValue constraint={constraint} />
+                    </td>
+                    <td className="hidden truncate whitespace-nowrap px-3 py-4 text-sm text-gray-500 lg:table-cell">
+                      {constraint.description}
+                    </td>
+                    <td className="whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                      {!readOnly && (
+                        <>
+                          <a
+                            href="#"
+                            className="pr-2 text-violet-600 hover:text-violet-900"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              setEditingConstraint(constraint);
+                              setShowConstraintForm(true);
+                            }}
+                          >
+                            Edit
+                            <span className="sr-only">
+                              , {constraint.property}
+                            </span>
+                          </a>
+                          <span aria-hidden="true"> | </span>
+                          <a
+                            href="#"
+                            className="pl-2 text-violet-600 hover:text-violet-900"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              setDeletingConstraint(constraint);
+                              setShowDeleteConstraintModal(true);
+                            }}
+                          >
+                            Delete
+                            <span className="sr-only">
+                              , {constraint.property}
+                            </span>
+                          </a>
+                        </>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ) : (
+            <EmptyState
+              text="New Constraint"
+              disabled={readOnly}
+              onClick={() => {
+                setEditingConstraint(null);
+                setShowConstraintForm(true);
+              }}
+            />
+          )}
         </div>
       </div>
     </>
diff --git a/ui/src/components/MoreInfo.tsx b/ui/src/components/MoreInfo.tsx
index 7c3e1de58d..bb6ea572f0 100644
--- a/ui/src/components/MoreInfo.tsx
+++ b/ui/src/components/MoreInfo.tsx
@@ -1,5 +1,3 @@
-import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid';
-
 type MoreInfoProps = {
   className?: string;
   href: string;
@@ -15,13 +13,9 @@ export default function MoreInfo(props: MoreInfoProps) {
         href={href}
         target="_blank"
         rel="noreferrer"
-        className="group inline-flex items-center text-gray-500 hover:text-gray-600"
+        className="group inline-flex items-center text-gray-500 underline underline-offset-4 hover:text-gray-600"
       >
-        <QuestionMarkCircleIcon
-          className="-ml-1 h-4 w-4 text-gray-300 group-hover:text-gray-400"
-          aria-hidden="true"
-        />
-        <span className="ml-1">{children}</span>
+        {children}
       </a>
     </div>
   );

From 82f9403e2ab78b46e6ec8907986b40f47449a787 Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Sat, 14 Dec 2024 13:18:25 -0500
Subject: [PATCH 2/5] chore: rm nav border

Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com>
---
 ui/src/app/flags/Flag.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/app/flags/Flag.tsx b/ui/src/app/flags/Flag.tsx
index a33de2bdaa..3c61c7c285 100644
--- a/ui/src/app/flags/Flag.tsx
+++ b/ui/src/app/flags/Flag.tsx
@@ -178,7 +178,7 @@ export default function Flag() {
 
       {/* Tabs Section */}
       <div className="mt-3">
-        <nav className="space-x-4 border-b border-gray-200">
+        <nav className="space-x-4">
           {flag.type === FlagType.VARIANT ? (
             <>
               {variantFlagTabs.map((tab) => (

From 8900237c1c4dfb6d7fd1e991fe21c84cada7b7ae Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Sat, 14 Dec 2024 16:52:07 -0500
Subject: [PATCH 3/5] chore: set max-w

Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com>
---
 ui/src/app/flags/Flag.tsx          | 2 +-
 ui/src/app/flags/NewFlag.tsx       | 2 +-
 ui/src/app/segments/NewSegment.tsx | 2 +-
 ui/src/app/segments/Segment.tsx    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/flags/Flag.tsx b/ui/src/app/flags/Flag.tsx
index 3c61c7c285..eb52f8c33c 100644
--- a/ui/src/app/flags/Flag.tsx
+++ b/ui/src/app/flags/Flag.tsx
@@ -172,7 +172,7 @@ export default function Flag() {
       </div>
 
       {/* Form Section - Full Width */}
-      <div className="mb-8">
+      <div className="mb-8 max-w-screen-md">
         <FlagForm flag={flag} />
       </div>
 
diff --git a/ui/src/app/flags/NewFlag.tsx b/ui/src/app/flags/NewFlag.tsx
index b18b95c1d6..691560922c 100644
--- a/ui/src/app/flags/NewFlag.tsx
+++ b/ui/src/app/flags/NewFlag.tsx
@@ -12,7 +12,7 @@ export default function NewFlag() {
         </MoreInfo>
       </div>
 
-      <div className="mb-8">
+      <div className="mb-8 max-w-screen-md">
         <FlagForm />
       </div>
     </>
diff --git a/ui/src/app/segments/NewSegment.tsx b/ui/src/app/segments/NewSegment.tsx
index 7f54149c22..15eb3fb0b4 100644
--- a/ui/src/app/segments/NewSegment.tsx
+++ b/ui/src/app/segments/NewSegment.tsx
@@ -12,7 +12,7 @@ export default function NewSegment() {
         </MoreInfo>
       </div>
 
-      <div className="mb-8">
+      <div className="mb-8 max-w-screen-md">
         <SegmentForm />
       </div>
     </>
diff --git a/ui/src/app/segments/Segment.tsx b/ui/src/app/segments/Segment.tsx
index 51d8bf2213..42492897b4 100644
--- a/ui/src/app/segments/Segment.tsx
+++ b/ui/src/app/segments/Segment.tsx
@@ -252,7 +252,7 @@ export default function Segment() {
         </MoreInfo>
       </div>
 
-      <div className="mb-8">
+      <div className="mb-8 max-w-screen-md">
         <SegmentForm segment={segment} />
       </div>
 

From acfe6724a82a74b64a5ef7cd3caf712abf1da9f5 Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Sat, 14 Dec 2024 17:13:25 -0500
Subject: [PATCH 4/5] chore: fix ui lint errors

Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com>
---
 ui/src/app/flags/Flag.tsx       | 2 --
 ui/src/app/segments/Segment.tsx | 1 -
 2 files changed, 3 deletions(-)

diff --git a/ui/src/app/flags/Flag.tsx b/ui/src/app/flags/Flag.tsx
index eb52f8c33c..90a7348fc5 100644
--- a/ui/src/app/flags/Flag.tsx
+++ b/ui/src/app/flags/Flag.tsx
@@ -18,7 +18,6 @@ import CopyToNamespacePanel from '~/components/panels/CopyToNamespacePanel';
 import DeletePanel from '~/components/panels/DeletePanel';
 import { useError } from '~/data/hooks/error';
 import { useSuccess } from '~/data/hooks/success';
-import { useTimezone } from '~/data/hooks/timezone';
 import {
   useCopyFlagMutation,
   useDeleteFlagMutation,
@@ -41,7 +40,6 @@ const booleanFlagTabs = [
 
 export default function Flag() {
   let { flagKey } = useParams();
-  const { inTimezone } = useTimezone();
 
   const [showDeleteFlagModal, setShowDeleteFlagModal] = useState(false);
   const [showCopyFlagModal, setShowCopyFlagModal] = useState(false);
diff --git a/ui/src/app/segments/Segment.tsx b/ui/src/app/segments/Segment.tsx
index 42492897b4..55edff8ffc 100644
--- a/ui/src/app/segments/Segment.tsx
+++ b/ui/src/app/segments/Segment.tsx
@@ -69,7 +69,6 @@ function ConstraintValue({ constraint }: { constraint: IConstraint }) {
 
 export default function Segment() {
   let { segmentKey } = useParams();
-  const { inTimezone } = useTimezone();
 
   const [showConstraintForm, setShowConstraintForm] = useState<boolean>(false);
   const [editingConstraint, setEditingConstraint] =

From b2ead5726564457ef632570b9780434b694f6174 Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Sat, 14 Dec 2024 19:30:54 -0500
Subject: [PATCH 5/5] chore: make better use of space for bottom of pages

Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com>
---
 go.work.sum                                 | 18 ++++------------
 ui/src/app/Layout.tsx                       |  2 +-
 ui/src/app/flags/Flag.tsx                   |  6 +++---
 ui/src/app/flags/NewFlag.tsx                |  2 +-
 ui/src/app/flags/analytics/Analytics.tsx    |  8 +++----
 ui/src/app/flags/rules/Rules.tsx            | 23 +++++++--------------
 ui/src/app/segments/NewSegment.tsx          |  2 +-
 ui/src/app/segments/Segment.tsx             |  4 ++--
 ui/src/components/Well.tsx                  |  4 +++-
 ui/src/components/flags/FlagTable.tsx       | 22 +++++++++++++-------
 ui/src/components/rollouts/Rollouts.tsx     | 22 +++++++-------------
 ui/src/components/segments/SegmentTable.tsx | 22 +++++++++++++-------
 ui/src/components/ui/guide.tsx              | 19 -----------------
 ui/src/components/variants/Variants.tsx     |  2 +-
 14 files changed, 64 insertions(+), 92 deletions(-)
 delete mode 100644 ui/src/components/ui/guide.tsx

diff --git a/go.work.sum b/go.work.sum
index 44bb08cfa4..f19bd590c9 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -74,12 +74,9 @@ cloud.google.com/go/auth v0.7.3/go.mod h1:HJtWUx1P5eqjy/f6Iq5KeytNpbAcGolPhOgyop
 cloud.google.com/go/auth v0.8.0/go.mod h1:qGVp/Y3kDRSDZ5gFD/XPUfYQ9xW1iI7q8RIRoCyBbJc=
 cloud.google.com/go/auth v0.9.0/go.mod h1:2HsApZBr9zGZhC9QAXsYVYaWk8kNUt37uny+XVKi7wM=
 cloud.google.com/go/auth v0.9.4/go.mod h1:SHia8n6//Ya940F1rLimhJCjjx7KE17t0ctFEci3HkA=
-cloud.google.com/go/auth v0.11.0 h1:Ic5SZz2lsvbYcWT5dfjNWgw6tTlGi2Wc8hyQSC9BstA=
-cloud.google.com/go/auth v0.11.0/go.mod h1:xxA5AqpDrvS+Gkmo9RqrGGRh6WSNKKOXhY3zNOr38tI=
+cloud.google.com/go/auth v0.9.9/go.mod h1:xxA5AqpDrvS+Gkmo9RqrGGRh6WSNKKOXhY3zNOr38tI=
 cloud.google.com/go/auth/oauth2adapt v0.2.2/go.mod h1:wcYjgpZI9+Yu7LyYBg4pqSiaRkfEK3GQcpb7C/uyF1Q=
 cloud.google.com/go/auth/oauth2adapt v0.2.3/go.mod h1:tMQXOfZzFuNuUxOypHlQEXgdfX5cuhwU+ffUuXRJE8I=
-cloud.google.com/go/auth/oauth2adapt v0.2.6 h1:V6a6XDu2lTwPZWOawrAa9HUK+DB2zfJyTuciBG5hFkU=
-cloud.google.com/go/auth/oauth2adapt v0.2.6/go.mod h1:AlmsELtlEBnaNTL7jCj8VQFLy6mbZv0s4Q7NGBeQ5E8=
 cloud.google.com/go/automl v1.13.6/go.mod h1:/0VtkKis6KhFJuPzi45e0E+e9AdQE09SNieChjJqU18=
 cloud.google.com/go/automl v1.13.11/go.mod h1:oMJdXRDOVC+Eq3PnGhhxSut5Hm9TSyVx1aLEOgerOw8=
 cloud.google.com/go/automl v1.14.0/go.mod h1:Kr7rN9ANSjlHyBLGvwhrnt35/vVZy3n/CP4Xmyj0shM=
@@ -1175,8 +1172,6 @@ github.com/googleapis/gax-go/v2 v2.12.0/go.mod h1:y+aIqrI5eb1YGMVJfuV3185Ts/D7qK
 github.com/googleapis/gax-go/v2 v2.12.2/go.mod h1:61M8vcyyXR2kqKFxKrfA22jaA8JGF7Dc8App1U3H6jc=
 github.com/googleapis/gax-go/v2 v2.12.3/go.mod h1:AKloxT6GtNbaLm8QTNSidHUVsHYcBHwWRvkNFJUQcS4=
 github.com/googleapis/gax-go/v2 v2.12.5/go.mod h1:BUDKcWo+RaKq5SC9vVYL0wLADa3VcfswbOMMRmB9H3E=
-github.com/googleapis/gax-go/v2 v2.14.0 h1:f+jMrjBPl+DL9nI4IQzLUxMq7XrAqFYB7hBPqMNIe8o=
-github.com/googleapis/gax-go/v2 v2.14.0/go.mod h1:lhBCnjdLrWRaPvLWhmc8IS24m9mr07qSYnHncrgo+zk=
 github.com/googleapis/gnostic v0.4.1/go.mod h1:LRhVm6pbyptWbWbuZ38d1eyptfvIytN3ir6b65WBswg=
 github.com/googleapis/gnostic v0.5.1/go.mod h1:6U4PtQXGIEt/Z3h5MAT7FNofLnw9vXk2cUuW7uA/OeU=
 github.com/googleapis/gnostic v0.5.5/go.mod h1:7+EbHbldMins07ALC74bsA81Ovc97DwqyJO1AENw9kA=
@@ -1940,8 +1935,7 @@ golang.org/x/crypto v0.25.0/go.mod h1:T+wALwcMOSE0kXgUAnPAHqTLW+XHgcELELW8VaDgm/
 golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
 golang.org/x/crypto v0.27.0/go.mod h1:1Xngt8kV6Dvbssa53Ziq6Eqn0HqbZi5Z6R0ZpwQzt70=
 golang.org/x/crypto v0.28.0/go.mod h1:rmgy+3RHxRZMyY0jjAJShp2zgEdOqj2AO7U0pYmeQ7U=
-golang.org/x/crypto v0.31.0 h1:ihbySMvVjLAeSH1IbfcRTkD/iNscyz8rGzjF/E5hV6U=
-golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
+golang.org/x/crypto v0.30.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
 golang.org/x/exp v0.0.0-20200331195152-e8c3332aa8e5/go.mod h1:4M0jN8W1tt0AVLNr8HDosyJCDCDuyL9N9+3m7wDWgKw=
 golang.org/x/exp v0.0.0-20230224173230-c95f2b4c22f2/go.mod h1:CxIveKay+FTh1D0yPZemJVgC/95VzuuOLq5Qi4xnoYc=
 golang.org/x/exp v0.0.0-20230515195305-f3d0a9c9a5cc/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w=
@@ -2128,8 +2122,6 @@ golang.org/x/time v0.0.0-20220210224613-90d013bbcef8/go.mod h1:tRJNPiyCQ0inRvYxb
 golang.org/x/time v0.3.0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 golang.org/x/time v0.6.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
-golang.org/x/time v0.8.0 h1:9i3RxcPv3PZnitoVGMPDKZSq1xW1gK1Xy3ArNOGZfEg=
-golang.org/x/time v0.8.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 golang.org/x/tools v0.0.0-20180221164845-07fd8470d635/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20181011042414-1f849cf54d09/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20181030221726-6c7e314b6563/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
@@ -2176,9 +2168,8 @@ golang.org/x/tools v0.22.0/go.mod h1:aCwcsjqvq7Yqt6TNyX7QMU2enbQ/Gt0bo6krSeEri+c
 golang.org/x/tools v0.23.0/go.mod h1:pnu6ufv6vQkll6szChhK3C3L/ruaIv5eBeztNG8wtsI=
 golang.org/x/tools v0.24.0/go.mod h1:YhNqVBIfWHdzvTLs0d8LCuMhkKUgSUKldakyV7W/WDQ=
 golang.org/x/tools v0.26.0/go.mod h1:TPVVj70c7JJ3WCazhD8OdXcZg/og+b9+tH/KxylGwH0=
+golang.org/x/tools v0.27.0/go.mod h1:sUi0ZgbwW9ZPAq26Ekut+weQPR5eIM6GQLQ1Yjm1H0Q=
 golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2/go.mod h1:K8+ghG5WaK9qNqU5K3HdILfMLy1f3aNYFI/wnl100a8=
-golang.org/x/xerrors v0.0.0-20240903120638-7835f813f4da h1:noIWHXmPHxILtqtCOPIhSt0ABwskkZKjD3bXGnZGpNY=
-golang.org/x/xerrors v0.0.0-20240903120638-7835f813f4da/go.mod h1:NDW/Ps6MPRej6fsCIbMTohpP40sJ/P/vI1MoTEGwX90=
 google.golang.org/api v0.0.0-20160322025152-9bf6e6e569ff/go.mod h1:4mhQ8q/RsB7i+udVvVy5NUi08OU8ZlA0gRVgrF7VFY0=
 google.golang.org/api v0.10.0/go.mod h1:o4eAsZoiT+ibD93RtjEohWalFOjRDx6CVaqeizhEnKg=
 google.golang.org/api v0.35.0/go.mod h1:/XrVsuzM0rZmrsbjJutiuftIzeuTQcEeaYcSk/mQ1dg=
@@ -2200,9 +2191,8 @@ google.golang.org/api v0.189.0/go.mod h1:FLWGJKb0hb+pU2j+rJqwbnsF+ym+fQs73rbJ+KA
 google.golang.org/api v0.191.0/go.mod h1:tD5dsFGxFza0hnQveGfVk9QQYKcfp+VzgRqyXFxE0+E=
 google.golang.org/api v0.193.0/go.mod h1:Po3YMV1XZx+mTku3cfJrlIYR03wiGrCOsdpC67hjZvw=
 google.golang.org/api v0.196.0/go.mod h1:g9IL21uGkYgvQ5BZg6BAtoGJQIm8r6EgaAbpNey5wBE=
+google.golang.org/api v0.203.0/go.mod h1:BuOVyCSYEPwJb3npWvDnNmFI92f3GeRnHNkETneT3SI=
 google.golang.org/api v0.205.0/go.mod h1:NrK1EMqO8Xk6l6QwRAmrXXg2v6dzukhlOyvkYtnvUuc=
-google.golang.org/api v0.210.0 h1:HMNffZ57OoZCRYSbdWVRoqOa8V8NIHLL0CzdBPLztWk=
-google.golang.org/api v0.210.0/go.mod h1:B9XDZGnx2NtyjzVkOVTGrFSAVZgPcbedzKg/gTLwqBs=
 google.golang.org/appengine v1.6.2/go.mod h1:i06prIuMbXzDqacNJfV5OdTW448YApPu5ww/cMBSeb0=
 google.golang.org/appengine v1.6.7/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=
 google.golang.org/appengine v1.6.8/go.mod h1:1jJ3jBArFh5pcgW8gCtRJnepW8FzD1V44FJffLiz/Ds=
diff --git a/ui/src/app/Layout.tsx b/ui/src/app/Layout.tsx
index 9aa08afe1e..11161cf0b6 100644
--- a/ui/src/app/Layout.tsx
+++ b/ui/src/app/Layout.tsx
@@ -81,7 +81,7 @@ function InnerLayout() {
           />
         )}
         <main className="flex pt-1 sm:pt-4">
-          <div className="mx-auto w-full max-w-7xl overflow-x-auto px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto w-full max-w-screen-lg overflow-x-auto px-4 sm:px-6 lg:px-8">
             <Outlet />
           </div>
         </main>
diff --git a/ui/src/app/flags/Flag.tsx b/ui/src/app/flags/Flag.tsx
index 90a7348fc5..fef044db3c 100644
--- a/ui/src/app/flags/Flag.tsx
+++ b/ui/src/app/flags/Flag.tsx
@@ -170,13 +170,13 @@ export default function Flag() {
       </div>
 
       {/* Form Section - Full Width */}
-      <div className="mb-8 max-w-screen-md">
+      <div className="mb-8">
         <FlagForm flag={flag} />
       </div>
 
       {/* Tabs Section */}
-      <div className="mt-3">
-        <nav className="space-x-4">
+      <div>
+        <nav className="mb-8 space-x-4">
           {flag.type === FlagType.VARIANT ? (
             <>
               {variantFlagTabs.map((tab) => (
diff --git a/ui/src/app/flags/NewFlag.tsx b/ui/src/app/flags/NewFlag.tsx
index 691560922c..b18b95c1d6 100644
--- a/ui/src/app/flags/NewFlag.tsx
+++ b/ui/src/app/flags/NewFlag.tsx
@@ -12,7 +12,7 @@ export default function NewFlag() {
         </MoreInfo>
       </div>
 
-      <div className="mb-8 max-w-screen-md">
+      <div className="mb-8">
         <FlagForm />
       </div>
     </>
diff --git a/ui/src/app/flags/analytics/Analytics.tsx b/ui/src/app/flags/analytics/Analytics.tsx
index 6d20263a0d..c2ef0fccc5 100644
--- a/ui/src/app/flags/analytics/Analytics.tsx
+++ b/ui/src/app/flags/analytics/Analytics.tsx
@@ -101,7 +101,7 @@ export default function Analytics() {
   }, [selectedDuration]);
 
   return (
-    <div className="mt-2">
+    <div className="mt-2 max-w-screen-lg">
       {config.analyticsEnabled ? (
         <>
           <div className="sm:flex sm:items-center">
@@ -141,10 +141,10 @@ export default function Analytics() {
           </div>
         </>
       ) : (
-        <div className="mt-10 flex flex-col text-center">
+        <div className="mt-10">
           <Well>
-            <p className="text-sm text-gray-600">Analytics Disabled</p>
-            <p className="mt-4 text-sm text-gray-500">
+            <p>Analytics Disabled</p>
+            <p className="mt-4">
               See the configuration{' '}
               <a
                 className="text-violet-500"
diff --git a/ui/src/app/flags/rules/Rules.tsx b/ui/src/app/flags/rules/Rules.tsx
index 962b8aa9b2..a5aed8b28b 100644
--- a/ui/src/app/flags/rules/Rules.tsx
+++ b/ui/src/app/flags/rules/Rules.tsx
@@ -272,7 +272,6 @@ export default function Rules() {
       const size = rule.segmentKeys ? rule.segmentKeys.length : 0;
 
       // Combine both segment and segments for legacy purposes.
-      // TODO(yquansah): Should be removed once there are no more references to `segmentKey`.
       for (let i = 0; i < size; i++) {
         const ruleSegment = rule.segmentKeys && rule.segmentKeys[i];
         const segment = segments.find(
@@ -409,7 +408,11 @@ export default function Rules() {
         <div className="sm:flex sm:items-center">
           <div className="sm:flex-auto">
             <p className="mt-1 text-sm text-gray-500">
-              Enable rich targeting and segmentation for evaluating your flags
+              Rules are evaluated in order from top to bottom.
+            </p>
+            <p className="mt-1 text-sm text-gray-500">
+              Rules can be rearranged by clicking on the header and dragging and
+              dropping it into place.
             </p>
           </div>
           {((rules && rules.length > 0) || showDefaultVariant) && (
@@ -428,20 +431,8 @@ export default function Rules() {
         </div>
         <div className="mt-10">
           {(rules && rules.length > 0) || showDefaultVariant ? (
-            <div className="flex lg:space-x-5">
-              <div className="hidden w-1/4 flex-col space-y-7 pr-3 lg:flex">
-                <p className="text-sm font-light text-gray-700">
-                  Rules are evaluated in order from{' '}
-                  <span className="font-semibold">top to bottom</span>. The
-                  first rule that matches will be applied.
-                </p>
-                <p className="text-sm font-light text-gray-700">
-                  Rules can be rearranged by clicking on a rule header and{' '}
-                  <span className="font-semibold">dragging and dropping</span>{' '}
-                  it into place.
-                </p>
-              </div>
-              <div className="pattern-boxes w-full border border-gray-200 p-4 pattern-bg-gray-solid50 pattern-gray-solid100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-gray-solid lg:w-3/4 lg:p-6">
+            <div className="flex">
+              <div className="pattern-boxes w-full border border-gray-200 p-4 pattern-bg-gray-solid50 pattern-gray-solid100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-gray-solid lg:p-6">
                 {rules && rules.length > 0 && (
                   <DndContext
                     sensors={sensors}
diff --git a/ui/src/app/segments/NewSegment.tsx b/ui/src/app/segments/NewSegment.tsx
index 15eb3fb0b4..7f54149c22 100644
--- a/ui/src/app/segments/NewSegment.tsx
+++ b/ui/src/app/segments/NewSegment.tsx
@@ -12,7 +12,7 @@ export default function NewSegment() {
         </MoreInfo>
       </div>
 
-      <div className="mb-8 max-w-screen-md">
+      <div className="mb-8">
         <SegmentForm />
       </div>
     </>
diff --git a/ui/src/app/segments/Segment.tsx b/ui/src/app/segments/Segment.tsx
index 55edff8ffc..a3f61a8091 100644
--- a/ui/src/app/segments/Segment.tsx
+++ b/ui/src/app/segments/Segment.tsx
@@ -251,7 +251,7 @@ export default function Segment() {
         </MoreInfo>
       </div>
 
-      <div className="mb-8 max-w-screen-md">
+      <div className="mb-8">
         <SegmentForm segment={segment} />
       </div>
 
@@ -260,7 +260,7 @@ export default function Segment() {
           <div className="sm:flex-auto">
             <h3 className="font-medium leading-6 text-gray-900">Constraints</h3>
             <p className="mt-1 text-sm text-gray-500">
-              Determine if a request matches a segment
+              Determine if a request matches a segment.
             </p>
           </div>
           {segment.constraints && segment.constraints.length > 0 && (
diff --git a/ui/src/components/Well.tsx b/ui/src/components/Well.tsx
index a4ae10f0d5..a5b75785e9 100644
--- a/ui/src/components/Well.tsx
+++ b/ui/src/components/Well.tsx
@@ -8,7 +8,9 @@ export default function Well(props: WellProps) {
 
   return (
     <div className={`overflow-hidden rounded-lg bg-gray-50 ${className}`}>
-      <div className="px-4 py-5 sm:p-8">{children}</div>
+      <div className="px-4 py-5 text-center text-sm text-muted-foreground sm:p-8">
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/ui/src/components/flags/FlagTable.tsx b/ui/src/components/flags/FlagTable.tsx
index e0585c3e84..eeb1bc8470 100644
--- a/ui/src/components/flags/FlagTable.tsx
+++ b/ui/src/components/flags/FlagTable.tsx
@@ -10,7 +10,7 @@ import {
 } from '@tanstack/react-table';
 import { useState, useEffect, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { DataTablePagination } from '~/components/ui/table-pagination';
 import { useTimezone } from '~/data/hooks/timezone';
 import { FlagType, flagTypeToLabel, IFlag } from '~/types/Flag';
@@ -24,11 +24,11 @@ import { Badge } from '~/components/ui/badge';
 import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import { Search } from '~/components/ui/search';
 import { DataTableViewOptions } from '~/components/ui/table-view-options';
-import Guide from '~/components/ui/guide';
 import { VariableIcon, ToggleLeftIcon } from 'lucide-react';
 import { useError } from '~/data/hooks/error';
 import { INamespaceBase } from '~/types/Namespace';
 import { TableSkeleton } from '~/components/ui/table-skeleton';
+import Well from '../Well';
 
 type FlagTableProps = {
   namespace: INamespaceBase;
@@ -186,13 +186,21 @@ export default function FlagTable(props: FlagTableProps) {
         </div>
       </div>
       {table.getRowCount() === 0 && filter.length === 0 && (
-        <Guide>
-          Flags enable you to control and roll out new functionality
-          dynamically. Create a new flag to get started.
-        </Guide>
+        <Well>
+          <p>
+            Flags enable you to control and roll out new functionality
+            dynamically. Create a{' '}
+            <Link className="text-violet-500" to={`${path}/new`}>
+              new flag
+            </Link>{' '}
+            to get started.
+          </p>
+        </Well>
       )}
       {table.getRowCount() === 0 && filter.length > 0 && (
-        <Guide>No flags matched your search.</Guide>
+        <Well>
+          <p>No flags matched your search.</p>
+        </Well>
       )}
       {table.getRowModel().rows.map((row) => {
         const item = row.original;
diff --git a/ui/src/components/rollouts/Rollouts.tsx b/ui/src/components/rollouts/Rollouts.tsx
index 0215a2c603..7c44f44e77 100644
--- a/ui/src/components/rollouts/Rollouts.tsx
+++ b/ui/src/components/rollouts/Rollouts.tsx
@@ -228,7 +228,6 @@ export default function Rollouts(props: RolloutsProps) {
 
   const rollouts = useMemo(() => {
     // Combine both segmentKey and segmentKeys for legacy purposes.
-    // TODO(yquansah): Should be removed once there are no more references to `segmentKey`.
     return rolloutsRules.map((rollout) => {
       if (rollout.segment) {
         let segmentKeys: string[] = [];
@@ -383,7 +382,12 @@ export default function Rollouts(props: RolloutsProps) {
         <div className="sm:flex sm:items-center">
           <div className="sm:flex-auto">
             <p className="mt-1 text-sm text-gray-500">
-              Return boolean values based on rules you define
+              Return boolean values based on rules you define. Rules are
+              evaluated in order from top to bottom.
+            </p>
+            <p className="mt-1 text-sm text-gray-500">
+              Rules can be rearranged by clicking on the header and dragging and
+              dropping it into place.
             </p>
           </div>
           <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
@@ -402,19 +406,7 @@ export default function Rollouts(props: RolloutsProps) {
           </div>
         </div>
         <div className="mt-10">
-          <div className="flex lg:space-x-5">
-            <div className="hidden w-1/4 flex-col space-y-7 pr-3 lg:flex">
-              <p className="text-sm font-light text-gray-700">
-                Rollout rules are evaluated in order from{' '}
-                <span className="font-semibold">top to bottom</span>. The first
-                rule that matches will be applied.
-              </p>
-              <p className="text-sm font-light text-gray-700">
-                Rollouts can be rearranged by clicking on a rollout header and{' '}
-                <span className="font-semibold">dragging and dropping</span> it
-                into place.
-              </p>
-            </div>
+          <div className="flex">
             <div className="dark:pattern-bg-solidwhite pattern-boxes w-full border border-gray-200 p-4 pattern-bg-gray-solid50 pattern-gray-solid100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-gray-solid lg:p-6">
               {rollouts && rollouts.length > 0 && (
                 <DndContext
diff --git a/ui/src/components/segments/SegmentTable.tsx b/ui/src/components/segments/SegmentTable.tsx
index a0c6c20b7c..4b22e38522 100644
--- a/ui/src/components/segments/SegmentTable.tsx
+++ b/ui/src/components/segments/SegmentTable.tsx
@@ -22,14 +22,14 @@ import { Badge } from '~/components/ui/badge';
 import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import { Search } from '~/components/ui/search';
 import { DataTableViewOptions } from '~/components/ui/table-view-options';
-import Guide from '~/components/ui/guide';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { DataTablePagination } from '~/components/ui/table-pagination';
 import { AsteriskIcon, SigmaIcon } from 'lucide-react';
 import { useError } from '~/data/hooks/error';
 import { useListSegmentsQuery } from '~/app/segments/segmentsApi';
 import { INamespaceBase } from '~/types/Namespace';
 import { TableSkeleton } from '~/components/ui/table-skeleton';
+import Well from '../Well';
 
 type SegmentTableProps = {
   namespace: INamespaceBase;
@@ -177,13 +177,21 @@ export default function SegmentTable(props: SegmentTableProps) {
         </div>
       </div>
       {table.getRowCount() === 0 && filter.length !== 0 && (
-        <Guide>No segments matched your search.</Guide>
+        <Well>
+          <p>No segments matched your search.</p>
+        </Well>
       )}
       {table.getRowCount() === 0 && filter.length === 0 && (
-        <Guide className="mt-6">
-          Segments enable request targeting based on defined criteria. Create
-          new segment to get started.
-        </Guide>
+        <Well>
+          <p>
+            Segments enable request targeting based on defined criteria. Create
+            a{' '}
+            <Link className="text-violet-500" to={`${path}/new`}>
+              new segment
+            </Link>{' '}
+            to get started.
+          </p>
+        </Well>
       )}
       {table.getRowModel().rows.map((row) => {
         const item = row.original;
diff --git a/ui/src/components/ui/guide.tsx b/ui/src/components/ui/guide.tsx
deleted file mode 100644
index 4302bf7773..0000000000
--- a/ui/src/components/ui/guide.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { cn } from '~/lib/utils';
-import Well from '~/components/Well';
-
-export interface GuideProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-const Guide = ({ children, className, ...props }: GuideProps) => (
-  <div className={cn('flex flex-col text-center', className)}>
-    <Well>
-      <p className="p-2 text-sm text-muted-foreground" {...props}>
-        {children}
-      </p>
-    </Well>
-  </div>
-);
-
-Guide.displayName = 'Guide';
-
-export default Guide;
diff --git a/ui/src/components/variants/Variants.tsx b/ui/src/components/variants/Variants.tsx
index 43b041835e..f69db2ea26 100644
--- a/ui/src/components/variants/Variants.tsx
+++ b/ui/src/components/variants/Variants.tsx
@@ -78,7 +78,7 @@ export default function Variants({ flag }: VariantsProps) {
         <div className="sm:flex sm:items-center">
           <div className="sm:flex-auto">
             <p className="mt-1 text-sm text-gray-500">
-              Return different values based on rules you define
+              Return different values based on rules you define.
             </p>
           </div>
           {flag.variants && flag.variants.length > 0 && (