fix(web-shell): put the list-failure notice under the tabs, not above them (#16104)

* fix(web-shell): put the list-failure notice under the tabs, not above them

#16082 merged with the notice as the nav's first child, so a failed session load
rendered above the Sessions/Archived tab bar and pushed the list's own controls
down - an error about the list appearing before the list's navigation. It now
renders after the tabs and the title filter, in the region the sessions occupy.

Also stops break-all from cutting the request id mid-token ('req' /
'uest-list-500'); break-words keeps it whole and wraps at a boundary.

Observed in a real browser at 1280x800 against a 500 from /sessions/query:
  before: nav children = [alert y=52, tabs y=180, search y=212]
  after:  nav children = [tabs y=52, search y=84, alert y=128]

The file also carried two prettier violations from the squash merge; prettier
--write normalises them, which is why the diff touches two unrelated indents.

* style(web-shell): keep the diff to the move and the word break

The previous commit ran a newer prettier than this repo pins, which reindented two
unrelated call sites and does not satisfy the repo's own --check. Redone from the
pristine file with the pinned prettier (3.6.1): the net diff against main is now
only the block move and break-all -> break-words.

---------

Co-authored-by: yiliang114 <[email protected]>

packages/web-shell/client/components/managed/ManagedSessionsPage.tsx

@@ -1320,36 +1320,6 @@ function ManagedSessionsContent({
       aria-label={t('managed.sessions')}
       className={`flex min-h-0 flex-col gap-1 overflow-y-auto ${home ? '' : 'max-h-48 md:max-h-none'}`}
     >
-      {listError && (
-        <div
-          role="alert"
-          className="flex flex-wrap items-center gap-2 p-2 text-sm text-destructive"
-        >
-          <span className="min-w-0">
-            <span className="block">{t('managed.listLoadFailed')}</span>
-            {listError.httpError && (
-              <span className="block break-all text-xs">
-                {t('managed.errorDetails', {
-                  status: listError.httpError.status,
-                  code: listError.httpError.code,
-                  requestId: listError.httpError.requestId ?? '',
-                })}
-              </span>
-            )}
-          </span>
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={listLoading}
-            onClick={() => {
-              if (listLoaded) void loadMore();
-              else setListRevision((current) => current + 1);
-            }}
-          >
-            {t('managed.listRetry')}
-          </Button>
-        </div>
-      )}
       {!interactive && error && (
         <p role="alert" className="text-sm text-destructive">
           {error}
@@ -1455,6 +1425,36 @@ function ManagedSessionsContent({
           />
         </label>
       )}
+      {listError && (
+        <div
+          role="alert"
+          className="flex flex-wrap items-center gap-2 p-2 text-sm text-destructive"
+        >
+          <span className="min-w-0">
+            <span className="block">{t('managed.listLoadFailed')}</span>
+            {listError.httpError && (
+              <span className="block break-words text-xs">
+                {t('managed.errorDetails', {
+                  status: listError.httpError.status,
+                  code: listError.httpError.code,
+                  requestId: listError.httpError.requestId ?? '',
+                })}
+              </span>
+            )}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={listLoading}
+            onClick={() => {
+              if (listLoaded) void loadMore();
+              else setListRevision((current) => current + 1);
+            }}
+          >
+            {t('managed.listRetry')}
+          </Button>
+        </div>
+      )}
       {home && provider.workspaceBinding ? (
         <ManagedWorkspaceNavigation
           provider={provider}