feat(ui): fix sessionID too long

apps/web/src/components/navbar/navbar.tsx

@@ -86,78 +86,24 @@ export const Navbar = (props: NavbarComponentProps) => {
                       setSubMenuOpen(undefined);
                     }}
                   ></div>
-                  <ul tabIndex={0} className="z-20 dropdown-content menu absolute right-4 p-2 shadow-xl bg-offwhite-100 rounded-box w-52">
+                  <ul
+                    tabIndex={0}
+                    className="z-20 dropdown-content menu absolute right-4 p-2 shadow-xl bg-offwhite-100 rounded-box max-w-52 w-52"
+                  >
                     {auth.authorized ? (
-                      <>
+                      <div className="w-full">
                         <div className="menu-title">
                           <h2>user: {auth.username}</h2>
-                          <h3 className="text-xs">session: {auth.sessionID}</h3>
+                          <h3 className="text-xs break-words">session: {auth.sessionID}</h3>
                         </div>
-                        <li>
-                          <button
-                            onClick={() => {
-                              setMenuOpen(false);
-                              setSubMenuOpen(undefined);
-                            }}
-                          >
-                            Add database
-                          </button>
-                        </li>
-                        <li>
-                          <button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              setSubMenuOpen(subMenuOpen === 'changeDb' ? undefined : 'changeDb');
-                            }}
-                            className={`${session.databases.length === 0 ? 'btn-disabled text-gray-300' : ''} ${
-                              subMenuOpen === 'changeDb' ? 'btn-active' : ''
-                            }`}
-                          >
-                            Change Database
-                          </button>
-                          {subMenuOpen === 'changeDb' && (
-                            <DatabaseMenu
-                              onClick={(db) => {
-                                if (session.currentDatabase != db) {
-                                  dispatch(updateCurrentDatabase(db));
-                                }
-                                setSubMenuOpen(undefined);
-                                setMenuOpen(false);
-                              }}
-                            />
-                          )}
-                        </li>
-                        <li>
-                          <button
-                            onClick={() => setSubMenuOpen(subMenuOpen === 'deleteDb' ? undefined : 'deleteDb')}
-                            className={`${session.databases.length === 0 ? 'btn-disabled text-gray-300' : ''} ${
-                              subMenuOpen === 'deleteDb' ? 'btn-active' : ''
-                            }`}
-                          >
-                            Delete Database
-                          </button>
-                          {subMenuOpen === 'deleteDb' && (
-                            <DatabaseMenu
-                              onClick={(db) => {
-                                if (session.currentDatabase === db) {
-                                  dispatch(updateCurrentDatabase(''));
-                                }
-                                api.DeleteDatabase(db).catch((e) => {
-                                  dispatch(addError(e.message));
-                                });
-                                setSubMenuOpen(undefined);
-                                setMenuOpen(false);
-                              }}
-                            />
-                          )}
-                        </li>
+
                         <div className="menu-title">
                           <div className="absolute left-0 h-0.5 w-full bg-offwhite-300"></div>
                           <h3 className="text-xs mt-3">Version: {buildInfo}</h3>
                         </div>
-                      </>
+                      </div>
                     ) : (
-                      <>
+                      <div className="w-full">
                         <div className="menu-title">
                           <h2>user: {auth.username}</h2>
                           <h3 className="text-xs">session: {auth.sessionID}</h3>
@@ -177,7 +123,7 @@ export const Navbar = (props: NavbarComponentProps) => {
                           <div className="absolute left-0 h-0.5 w-full bg-offwhite-300"></div>
                           <h3 className="text-xs mt-3">Version: {buildInfo}</h3>
                         </div>
-                      </>
+                      </div>
                     )}
                   </ul>
                 </>