Fixes layout issues with too long error

This happens when the error is too long -- this fixes a few issues around the layout in the data view.
Referralconsequently · Feb 23, 2024 · 01b7bb6 · 01b7bb6
1 parent db09a37
commit 01b7bb6
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/telemetry/ui/src/components/common/layout.tsx b/telemetry/ui/src/components/common/layout.tsx
@@ -13,11 +13,11 @@ const TwoColumnLayout: React.FC<TwoColumnLayoutProps> = ({
 }) => {
   return (
     <div className="flex h-full w-full">
-      <div className="w-1/2 h-full hide-scrollbar overflow-y-auto">
+      <div className="w-1/2 h-full">
         {/* Render left column content */}
         {leftColumnContent}
       </div>
-      <div className="w-1/2 h-full  hide-scrollbar overflow-hidden">
+      <div className="w-1/2 h-full">
         {/* Render right column content */}
         {rightColumnContent}
       </div>

diff --git a/telemetry/ui/src/components/routes/app/DataView.tsx b/telemetry/ui/src/components/routes/app/DataView.tsx
@@ -24,7 +24,7 @@ export const DataView = (props: { currentStep: Step | undefined; priorStep: Step
   const error = props.currentStep?.step_end_log?.exception;
 
   return (
-    <div className="h-full overflow-y-auto pl-3 pt-2 flex flex-col gap-2">
+    <div className="h-full pl-3 pt-2 flex flex-col gap-2">
       <div className="flex flex-row justify-between">
         <h1 className="text-2xl text-gray-600 font-semibold">State</h1>
         <div className="flex flex-row justify-end gap-2 pr-2">

diff --git a/telemetry/ui/src/components/routes/app/StateMachine.tsx b/telemetry/ui/src/components/routes/app/StateMachine.tsx
@@ -27,9 +27,9 @@ export const AppStateView = (props: {
     tabs.push({ id: 'action', displayName: 'Action' });
   }
   return (
-    <div className="px-10 h-full w-full">
+    <>
       <Tabs tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
-      <div className="h-full w-full">
+      <div className="px-10 h-full w-full overflow-y-auto">
         {currentTab === 'graph' && (
           <GraphView
             stateMachine={props.stateMachine}
@@ -45,6 +45,6 @@ export const AppStateView = (props: {
         {currentTab === 'data' && <DataView currentStep={currentStep} priorStep={priorStep} />}
         {currentTab === 'action' && <ActionView currentAction={actionModel} />}
       </div>
-    </div>
+    </>
   );
 };