fix: minor visual bugs (#672)

* fix: remove whitespace-pre on real-time if no live version * fix: empty rule table broken
checkmarble · Jan 28, 2025 · 20ab37a · 20ab37a
1 parent 14dc0e1
commit 20ab37a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx
@@ -456,14 +456,19 @@ function RealTimeSection({
               }}
             />
           </span>
-          <span className="text-grey-00 text-s inline-flex items-center whitespace-pre font-semibold">
+          <span
+            className={clsx(
+              'text-grey-00 text-s inline-flex items-center font-semibold',
+              { 'whitespace-pre': isLive },
+            )}
+          >
             {isLive ? (
               <Trans
                 t={t}
                 i18nKey="scenarios:home.execution.real_time.callout.scenario_id"
                 components={{
                   CopyScenarioId: (
-                    <CopyToClipboardButton toCopy={scenarioId}>
+                    <CopyToClipboardButton toCopy={scenarioId} className="ml-1">
                       <code>scenario_id</code>
                     </CopyToClipboardButton>
                   ),

diff --git a/...ilder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules.tsx b/...ilder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules.tsx
@@ -206,6 +206,7 @@ export default function Rules() {
     getSortedRowModel: getSortedRowModel(),
     rowLink: ({ id }) => <Link to={`./${fromUUID(id)}`} />,
   });
+  const columnLength = table.getHeaderGroups()[0]?.headers.length ?? 1;
 
   return (
     <div className="flex flex-col gap-4">
@@ -252,7 +253,7 @@ export default function Rules() {
             rows.map((row) => <Table.Row key={row.id} row={row} />)
           ) : (
             <tr className="h-28">
-              <td colSpan={columns.length}>
+              <td colSpan={columnLength}>
                 <p className="text-center">{t('scenarios:rules.empty')}</p>
               </td>
             </tr>