Update <CodeEditor/>'s optional elements; move network limits <Tabs/> location

[jeesunikim]

better view to see changes: https://github.com/stellar/laboratory/pull/1939/changes?w=1
Figma design: https://www.figma.com/design/9j3YQ5URseAsn3j0tf2FFq/Laboratory?node-id=6433-153647&m=dev

[Copilot]

Pull request overview

Updates the CodeEditor UI so optional controls can be displayed independently of the header/title, and adjusts the Network Limits page layout to relocate the view tabs and present JSON output inside the CodeEditor.

Changes:

• Repositions CodeEditor actions to float over the editor content and makes the header optional.
• Moves the Network Limits <Tabs /> from the PageCard right element into the page body and routes JSON viewing through CodeEditor.
• Refreshes live_soroban_state_size_window samples for mainnet/testnet/futurenet network limits.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/constants/networkLimits.ts	Updates the sampled network limit window values used by the Network Limits UI.
src/components/CodeEditor/styles.scss	Adds positioning rules to support floating action controls over the editor.
src/components/CodeEditor/index.tsx	Restructures rendering so actions float over the editor and aren’t tied to the title/header.
src/app/(sidebar)/network-limits/page.tsx	Relocates tabs and shows the JSON response via CodeEditor (with download enabled).

Comments suppressed due to low confidence (1)

src/components/CodeEditor/index.tsx:233

• CodeEditor__actions are now absolutely positioned over the Monaco editor, but the editor only has padding.top: 8. With the action buttons rendered at top: 8px, the buttons will overlap/hide the first lines of code and potentially intercept clicks/selection near the top-right of the editor. Consider reserving vertical space for the actions (e.g., increase editor padding/top inset when actions are present, or place actions in a non-overlapping header/tooling row).

      {/* Content / editor */}
      <div
        className="CodeEditor__content"
        // Container must have set height
        style={{ height: title ? `calc(100% - ${headerHeight}px)` : "100%" }}
      >
        {/* Actions floating over the editor */}
        <Box
          gap="xs"
          direction="row"
          align="center"
          justify="end"
          addlClassName="CodeEditor__actions"
        >
          {customEl ?? null}
          {languages && onLanguageChange ? (
            <Select
              id="code-editor-languages"
              fieldSize="sm"
              onChange={(e) =>
                onLanguageChange(e.target.value as SupportedLanguage)
              }
              value={selectedLanguage}
            >
              {languages.map((l) => (
                <option value={l} key={`ce-lang-${l}`}>
                  {l.toUpperCase()}
                </option>
              ))}
            </Select>
          ) : null}

          {fileName ? (
            <Button
              variant="tertiary"
              size="sm"
              icon={<Icon.Download01 />}
              title="Download"
              onClick={(e) => {
                e.preventDefault();

                downloadFile({
                  value,
                  fileType: "application/json",
                  fileName,
                  fileExtension: getFileExtension(),
                });
              }}
            ></Button>
          ) : null}

          <CopyText textToCopy={value}>
            <Button
              variant="tertiary"
              size="sm"
              icon={<Icon.Copy01 />}
              title="Copy"
              onClick={(e) => {
                e.preventDefault();
              }}
            ></Button>
          </CopyText>

          <Button
            variant="tertiary"
            size="sm"
            icon={isExpanded ? <Icon.X /> : <Icon.Expand06 />}
            title={isExpanded ? "Close" : "Expand"}
            onClick={(e) => {
              e.preventDefault();
              setIsExpanded(!isExpanded);
            }}
          ></Button>
        </Box>

        <MonacoEditor
          defaultLanguage="javascript"
          defaultValue=""
          language={
            selectedLanguage === "interface" ? "rust" : selectedLanguage
          }
          value={value}
          onMount={handleEditorDidMount}
          options={{
            minimap: { enabled: false },
            readOnly: true,
            scrollBeyondLastLine: false,
            padding: { top: 8, bottom: 8 },
            wordWrap: "on",
            guides: { indentation: false },
          }}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[stellar-jenkins]

Preview is available here:
http://laboratory-pr1939.previews.kube001.services.stellar-ops.com/

[stellar-jenkins]

Preview is available here:
http://laboratory-pr1939.previews.kube001.services.stellar-ops.com/

[quietbits]

I don't think we should put anything custom in the code area. There are so many things going on (different z-index levels, etc) that it's hard to predict what elements will be displayed. For example, I'm seeing this when I scroll the content:

Why can't we keep the controls in the header? @jeesunikim @minkyeongshin 🙏