feat: update codelist config design

[Konrad-Simso]

Description

Update the design of the codelist section of our config page. Earlier discuessed in another PR

Before

After

Related Issue(s)

• Merge "select codelist" and "edit codelist" views #13685

Verification

• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)

[codecov]

Codecov Report

Attention: Patch coverage is 98.63946% with 2 lines in your changes missing coverage. Please review.

Project coverage is 95.58%. Comparing base (465fc97) to head (59cce4a).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
...itModal/EditOptions/OptionTabs/EditTab/EditTab.tsx	92.59%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #14276   +/-   ##
=======================================
  Coverage   95.57%   95.58%           
=======================================
  Files        1864     1867    +3     
  Lines       24151    24210   +59     
  Branches     2786     2787    +1     
=======================================
+ Hits        23082    23140   +58     
- Misses        812      814    +2     
+ Partials      257      256    -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Konrad-Simso]

Sorry for the late commit, i saw it when doing review of your code @standeren in this PR and thought it could be changed here as your PR is not related to the component itself

[standeren]

Nice cleanup, but I have some suggestions 🤗

[standeren]

And I also have a general comment concerning the delete-functionality, as well as the conflicted-sources (trying to set a library id if manual options are set and vice versa).

We should sync the design here along with the image-component. For the image component the delete-choices are separated between deleting the ref and deleting the actual source.

When there are conflicting sources it is visualized like this in the image component:

Skjermopptak.2024-12-13.kl.09.11.34.mov

Also, when I have connected an optionlist in the Velg kodeliste I get the same codelist id visualized in the Ani referanse-id:

Skjermopptak.2024-12-13.kl.12.53.07.mov

And one last small thing I noticed, when I have a faulty codeList I cant remove it. Might be that this can be fixed easier when the other PR that fetches only the specified code list is implemented tho.

[ErlingHauan]

Testing:

• Immediately closing the modal when on a component options list should return us back to the original view
• Text in modal that lists code lists from library was larger than the modal`s heading
• Code list name text was larger than the image component name text
• Small adjustments to spacing

We fixed this in pair programming 😊

Final result: