feat: truncate longer query names in tab titles (#120)

So that longer query names used in tab titles don't overflow into the
adjacent tab titles, we now truncate them. The text is still added as a
title to the span, so a user can hover it and see the full name.

Author: mjfwebb

src/modules/EditorView/EditorTabs.tsx

@@ -69,10 +69,13 @@ export const EditorTabs = () => {
                         data-test-query-editor-tab={tab.title}
                         key={idx.toString()}
                         tabId={idx.toString()}
-                        className={`${theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"}`}
+                        className={theme.theme === Theme.LIGHT ? "ndl-theme-light" : "ndl-theme-dark"}
                     >
                         <div className="flex justify-center items-center">
-                            <span style={{ maxWidth: "7rem" }}>{tab.title}</span>
+                            <span className="truncate" style={{ maxWidth: "7rem" }} title={tab.title}>
+                                {tab.title}
+                            </span>
+
                             {useStore.getState().tabs.length > 1 && (
                                 <XMarkIconOutline
                                     data-test-close-icon-query-editor-tab