Combining a variable size scrollable list, a fixed size scrollable form and a small fixed size non-scrollable form

I'm trying to design a desktop app and I have an Entity that has three "sections" for its settings/parameters:

  • a short section of 5 fields (text fields, checkboxes...) - probably doesn't need scrolling
  • a list of variable size elements, the user can add, delete, edit those elements - usually needs scrolling
  • a longer form section that has 20 fields - definitely needs scrolling

The desktop app has a side panel, and the content panel has a fixed header.

I'm struggling to find a way to present all of these options to the user in an elegant way. My thought process is that I shouldn't have any nested scrolling (because it's not user friendly, imo) so I can only think of three options:

  • Multiple pages: you click a section and it takes you to a page. Since the header bar is always fixed, you'll always have a "back" button.
  • Tabs: have a tab bar (either under the fixed header I already have or at the bottom) showing the three tabs, and changing the content to show the different "pages".
  • Accordions: three collapsed sections and you can uncollapse one at a time. Drawback is that I don't have a scroll-to-the-top button (I simply don't know where to put it without covering the content) so to reach the other sections, you might have to scroll for a while or use the scrollbar...
  • Some other option I don't know of

Out of the three, I'm leaning towards Tabs because I don't think they have any drawback and they can be changed later to be shown side by side on very large screens...

Any thoughts? Thanks!

Edit

Adding quick mockup drafts as requested in the comments

Initially, the naive way was to put the sections one after another, but this will have nested scrolls Issue with nested scrolls

Then next, I thought about Accordions, but they will have limited space and nested "card/panels" and those don't look very good... accordions

Then maybe different pages, but then this page will be mostly empty different pages

And then Tabs, on the top, a bit crowded tabs on the top

Finally, tabs on the bottom, seems fine, but maybe there is a yet better solution tabs on the bottom

Tags: , , , , , ,