diff --git a/src/components/EditorCanvas/Area.jsx b/src/components/EditorCanvas/Area.jsx
index d660434..0d5ecd5 100644
--- a/src/components/EditorCanvas/Area.jsx
+++ b/src/components/EditorCanvas/Area.jsx
@@ -109,8 +109,10 @@ export default function Area({ data, onMouseDown, setResize, setInitCoords }) {
             className="w-fill p-2 h-full"
             style={{ backgroundColor: `${data.color}66` }}
           >
-            <div className="flex justify-between">
-              <div className="text-color select-none">{data.name}</div>
+            <div className="flex justify-between gap-1 w-full">
+              <div className="text-color select-none overflow-hidden text-ellipsis">
+                {data.name}
+              </div>
               {(hovered || (areaIsSelected() && !layout.sidebar)) && (
                 <Popover
                   visible={areaIsSelected() && !layout.sidebar}