Fixes #202

2022-12-16 11:39:46 +01:00
parent 0d9966f56c
commit be83f305dd
3 changed files with 66 additions and 54 deletions
@@ -44,60 +44,62 @@ export function TopBar({
      {lhs}
      <div className="main">
        <div className="inner">
-          <span
-            className={`sb-current-page ${
-              isLoading
-                ? "sb-loading"
-                : unsavedChanges
-                ? "sb-unsaved"
-                : "sb-saved"
-            }`}
-          >
-            <input
-              type="text"
-              ref={inputRef}
-              value={pageName}
-              className="sb-edit-page-name"
-              onBlur={(e) => {
-                (e.target as any).value = pageName;
-              }}
-              onKeyDown={(e) => {
-                e.stopPropagation();
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  const newName = (e.target as any).value;
-                  onRename(newName);
-                }
-                if (e.key === "Escape") {
-                  onRename();
-                }
-              }}
-            />
-          </span>
-          {notifications.length > 0 && (
-            <div className="sb-notifications">
-              {notifications.map((notification) => (
-                <div
-                  key={notification.id}
-                  className={`sb-notification-${notification.type}`}
+          <div className="wrapper">
+            <span
+              className={`sb-current-page ${
+                isLoading
+                  ? "sb-loading"
+                  : unsavedChanges
+                  ? "sb-unsaved"
+                  : "sb-saved"
+              }`}
+            >
+              <input
+                type="text"
+                ref={inputRef}
+                value={pageName}
+                className="sb-edit-page-name"
+                onBlur={(e) => {
+                  (e.target as any).value = pageName;
+                }}
+                onKeyDown={(e) => {
+                  e.stopPropagation();
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    const newName = (e.target as any).value;
+                    onRename(newName);
+                  }
+                  if (e.key === "Escape") {
+                    onRename();
+                  }
+                }}
+              />
+            </span>
+            {notifications.length > 0 && (
+              <div className="sb-notifications">
+                {notifications.map((notification) => (
+                  <div
+                    key={notification.id}
+                    className={`sb-notification-${notification.type}`}
+                  >
+                    {notification.message}
+                  </div>
+                ))}
+              </div>
+            )}
+            <div className="sb-actions">
+              {actionButtons.map((actionButton) => (
+                <button
+                  onClick={(e) => {
+                    actionButton.callback();
+                    e.stopPropagation();
+                  }}
+                  title={actionButton.description}
                >
-                  {notification.message}
-                </div>
+                  <actionButton.icon size={18} />
+                </button>
              ))}
            </div>
-          )}
-          <div className="sb-actions">
-            {actionButtons.map((actionButton) => (
-              <button
-                onClick={(e) => {
-                  actionButton.callback();
-                  e.stopPropagation();
-                }}
-                title={actionButton.description}
-              >
-                <actionButton.icon size={18} />
-              </button>
-            ))}
          </div>
        </div>
      </div>