-Added ellipsis in column and line-break in the InfoPanel

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 ${

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