[Mobile] Make Style Changes to Recent Objects

[rukmini-bose]

Closes
#7318

Describe your changes:

• Makes Recent Objects visible on all mobile devices by using a static height on the container (50% of device height). NOTE: This is not the best solution, but there's some architectural issues that are stopping us from a better solution. Let's do this for now.
• Removes any hover actions on the objects, such as the target button.
• Adds a static splitter to mobile that separates Recent Objects from the Object Tree
• Improves styling on the pane headers and labels by refactoring markup.
• Makes the various buttons associated with the Object Tree and Recent Objects visible and usable again.
• Increases the hit area for the items in the recent objects and makes it visible to users to click.
• Makes tree in mobile stay a static width that uses mobile-only CSS classes rather than Javascript.
• Includes style change for the collapse button (Collapsed Recent Items button needs polishing (TEMP) #7528)

All Submissions:

• Have you followed the guidelines in our Contributing document?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?
• Is this change backwards compatible? For example, developers won't need to change how they are calling the API or how they've extended core plugins such as Tables or Plots.

Author Checklist

• Changes address original issue?
• Tests included and/or updated with changes?
• Has this been smoke tested?
• Have you associated this PR with a type: label? Note: this is not necessarily the same as the original issue.
• Have you associated a milestone with this PR? Note: leave blank if unsure.
• Is this a breaking change to be called out in the release notes?
• Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

• Changes appear to address issue?
• Reviewer has tested changes by following the provided instructions?
• Changes appear not to be breaking changes?
• Appropriate automated tests included?
• Code style and in-line documentation are appropriate?

[codecov]

Codecov Report

Attention: Patch coverage is 44.44444% with 5 lines in your changes are missing coverage. Please review.

Project coverage is 55.36%. Comparing base (87ba9fc) to head (16253a9).
Report is 22 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7487      +/-   ##
==========================================
- Coverage   55.66%   55.36%   -0.30%     
==========================================
  Files         672      672              
  Lines       27003    27003              
  Branches     2624     2624              
==========================================
- Hits        15030    14950      -80     
- Misses      11254    11334      +80     
  Partials      719      719              

Flag	Coverage Δ
e2e-full	23.74% <ø> (-18.21%)	⬇️
e2e-stable	59.79% <ø> (+0.18%)	⬆️
unit	48.47% <44.44%> (-0.06%)	⬇️

Files	Coverage Δ
src/ui/layout/RecentObjectsListItem.vue	19.04% <44.44%> (ø)

... and 15 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 87ba9fc...16253a9. Read the comment docs.

[ozyx]

gotta rebase this PR onto master

[unlikelyzero]

can this be explicitly defined as mobile in that case?

[charlesh88]

Is there value in making this explicit in that way? If not, my pref is to leave more open as is.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 53.94%. Comparing base (a5c6b14) to head (9561ac4).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7487      +/-   ##
==========================================
- Coverage   56.60%   53.94%   -2.66%     
==========================================
  Files         672      672              
  Lines       27120    27120              
  Branches     2632     2632              
==========================================
- Hits        15351    14631     -720     
- Misses      11441    12161     +720     
  Partials      328      328              

Flag	Coverage Δ
e2e-full	23.64% <ø> (-18.13%)	⬇️
e2e-stable	50.89% <ø> (-9.47%)	⬇️
unit	49.09% <ø> (-0.02%)	⬇️

Files	Coverage Δ
src/ui/layout/AppLayout.vue	20.40% <ø> (ø)
src/ui/layout/RecentObjectsListItem.vue	22.72% <ø> (ø)

... and 88 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a5c6b14...9561ac4. Read the comment docs.

[rukmini-bose]

Needs visual and e2e tests. @johnhill2 Let's sync soon to see what the best approach for this is.

[charlesh88]

Styling in objects in Recently Viewed looks great. But, the way that holder is treated needs some changes. I've made those changes and pushed up the result, but wanted to note what was done and why.

• Currently, you're setting the max-height to 50vh. vh is not the best way to go visually in this case; I think we're better off in landscape on small devices with 50% of the vertical area available to the pane instead of 50% of the view portal height. Using height: 50% !important on the Recents pane visually splits the space beneath the status bar for a more balanced result.
• Also, max-height isn't the right property in this case. max-height should be used as a limiter, like "don't let this thing get any larger than this". In this case, you want to set the height. And, because JS is setting height on the element via code, you have to use !important.
• On larger mobile displays, 50/50 is too much. I think the tree should take precedence, and setting a discrete max-height is the way to go. I played a bit and thought that max-height: 200px looked good.
• Finally, we need to qualify the selector. Currently, the CSS as written is going to control all .l-pane elements with "--vertical" in their name. In this case, we only want to affect the Recents pane section, and yes, doing things this way works - for now. I added CSS classing to AppLayout.vue and moved style defs accordingly in pane.scss to enable this.