From 4c810901c3504712f91b4dc10e572862ff826c02 Mon Sep 17 00:00:00 2001
From: sascha10000 <github@duepre-sa.de>
Date: Thu, 9 Jun 2022 23:48:34 +0200
Subject: [PATCH] -Added ellipsis in column and line-break in the InfoPanel

---
 app/components/Column.tsx     | 2 +-
 app/components/InfoHeader.tsx | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/components/Column.tsx b/app/components/Column.tsx
index 758c218..faffa8f 100644
--- a/app/components/Column.tsx
+++ b/app/components/Column.tsx
@@ -27,7 +27,7 @@ function ColumnElement(column: ColumnProps) {
     >
       <div className="flex items-center text-slate-800 bg-slate-50 mb-[3px] p-2 pb-0 transition dark:bg-slate-900 dark:text-slate-300">
         {column.icon && <column.icon className="h-6 w-6 mr-1" />}
-        <Title className="">{title}</Title>
+        <Title className="text-ellipsis overflow-hidden">{title}</Title>
       </div>
       <div
         className={`overflow-y-auto ${
diff --git a/app/components/InfoHeader.tsx b/app/components/InfoHeader.tsx
index e212e04..551703a 100644
--- a/app/components/InfoHeader.tsx
+++ b/app/components/InfoHeader.tsx
@@ -6,11 +6,11 @@ import { useJsonColumnViewState } from "~/hooks/useJsonColumnView";
 import { concatenated, getHierarchicalTypes } from "~/utilities/dataType";
 import { formatRawValue } from "~/utilities/formatter";
 import { isNullable } from "~/utilities/nullable";
+import { CopyTextButton } from "./CopyTextButton";
 import { Body } from "./Primitives/Body";
 import { LargeMono } from "./Primitives/LargeMono";
 import { Title } from "./Primitives/Title";
 import { ValueIcon, ValueIconSize } from "./ValueIcon";
-import { CopyTextButton } from "./CopyTextButton";
 
 export type InfoHeaderProps = {
   relatedPaths: string[];
@@ -41,12 +41,13 @@ export function InfoHeader({ relatedPaths }: InfoHeaderProps) {
   }, [relatedPaths, json]);
 
   const [hovering, setHovering] = useState(false);
+  console.warn(selectedInfo);
 
   return (
     <div className="mb-4 pb-4">
       <div className="flex items-center">
-        <Title className="flex-1 mr-2 text-slate-700 transition dark:text-slate-200">
-          {selectedName ?? "nothing"}
+        <Title className="flex-1 mr-2 overflow-hidden overflow-ellipsis break-words text-slate-700 transition dark:text-slate-200">
+          { selectedName ?? "nothing" }
         </Title>
         <div>
           <ValueIcon