prevented overflow in expression

[JamalAlabdullah]

Description

• Updated css in LogicalExpressionEditor and StudioCodeFagment components to avoid overflow with a long text.

Related Issue(s)

• Connecting long fields in expressions gives overflow #12970

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)

Documentation

• User documentation is updated with a separate linked PR in altinn-studio-docs. (if applicable)

[standeren]

not sure you noticed Lars comment in the issue, but I believe we need to fix those issues as well because it messes up for the whole config panel section 😅

See video;

Skjermopptak.2024-06-25.kl.11.52.25.mov

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.88%. Comparing base (d3b425e) to head (769edd4).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #13014   +/-   ##
=======================================
  Coverage   91.88%   91.88%           
=======================================
  Files        1426     1426           
  Lines       19957    19957           
  Branches     2389     2389           
=======================================
  Hits        18338    18338           
  Misses       1360     1360           
  Partials      259      259           

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

[JamalAlabdullah]

Here is the solution for long text id overflow, there is just one thing changed, which is delete button for id , it is now under the id and takes the full width i hope it is ok to be like that @Annikenkbrathen ?🤔

Spiller-overvfllow.mp4

[Annikenkbrathen]

Here is the solution for long text id overflow, there is just one thing changed, which is delete button for id , it is now under the id and takes the full width i hope it is ok to be like that @Annikenkbrathen ?🤔

Spiller-overvfllow.mp4

I have some feedback in general. I do not know it this is in the scope of this issue.

1. The delete button is for deleting the whole expression rule, not just the id. So it should be connected to the frame so the users understand what the button is for. Could it be placed in the frame, in the top right corner above the id?
   Today we have everything in this frame. Why is the frame gone in this video?
   

2. The select for choosing datamodel has a white background. Why is that? can the background be removed so its similar to the other components?
   

The whole editor needs som design improvements to match the rest of the studio components, but that could be fixed in a new issue after I am done with this #12627 . I created an issue for design improvements #13045

[standeren]

Looks much better! But I think we need to fix this without directly adapting the StudioComponent 🤔 Unless this change does not lead to unintended changes other places where the component is used, such as Process-editor

[framitdavid]

I have a few comments on what we need to change before merge. We need to ensure that our studio-components is generic and not tied to specific use-cases.

[framitdavid]

Just a few small comments to consider. 😊

[framitdavid]

LGTM! Verify the comments from the other team members before merge. 😊

[standeren]

Looks good to me, but since we have not added the ellipsis I believe we should add a tooltip/title to the Id-component so we are able to see the whole Id if necessary! 🤗

[JamalAlabdullah]

Looks good to me, but since we have not added the ellipsis I believe we should add a tooltip/title to the Id-component so we are able to see the whole Id if necessary! 🤗

nice suggistaion😊, I added a title.