Search Results Page is responsive and mobile friendly

[ShanaLMoore]

Summary

Header Logo at 375 x 667

The log and 'libraries' line breaks at this dimension.

"Digital Collections" Header

The "Digital Collections" heading is cut off at the top. It looks like there needs to be more padding on the bottom as well (under "our collections")

Search Bar

Search Bar appears cramped and user cannot read "Search Digital Collections"

Page Number and Sort

The sorting options, number of items per page option, and link/grid option have a line break as well. It would look more cohesive if these items could be centered or all on one line.

Expanded language options

When a user clicks on the options for the site languages the header is does not expand with it. See screenshots below.

Expanded login options

When a user clicks on the options for the login the header is does not expand with it. See screenshots below.

Acceptance Criteria

• [x] Header Logo: The logo and 'libraries' do not break onto separate lines
• [x] "Digital Collections" Header: The entire "Digital Collections: Explore items digitized from our collections." is visible and has appropriate padding
• [x] Search Bar: Search bar does not have contents cut-off
• [x] Page Number and Sort: Sorting options, number of items per page option, and link/grid option are centered or all on one line
• [x] Expanded language options: when language options are expanded, the logo and 'libraries' do not break onto separate lines and the options look cohesive
• [x] Expanded login options: when login options are expanded, the llogo and 'libraries' do not break onto separate lines and the options look cohesive

Testing Instructions

Navigate to the Search Results Page and ensure the following are correct:

• [ ] Header Logo: The logo and 'libraries' do not break onto separate lines
• [ ] "Digital Collections" Header: The entire "Digital Collections: Explore items digitized from our collections." is visible and has appropriate padding
• [ ] Search Bar: Search bar does not have contents cut-off
• [ ] Page Number and Sort: Sorting options, number of items per page option, and link/grid option are centered or all on one line
• [ ] Expanded language options: when language options are expanded, the logo and 'libraries' do not break onto separate lines and the options look cohesive
• [ ] Expanded login options: when login options are expanded, the llogo and 'libraries' do not break onto separate lines and the options look cohesive

Notes

also closes https://github.com/scientist-softserv/utk-hyku/issues/480

[jillpe]

SoftServ QA: Needs Rework

• [x] Header Logo: The logo and 'libraries' do not break onto separate lines

  Screenshots

  

• [x] "Digital Collections" Header: The entire "Digital Collections: Explore items digitized from our collections." is visible and has appropriate padding

  Screenshots

• [x] Search Bar: Search bar does not have contents cut-off

  Screenshots

  Collections is still cut-off

• [x] Page Number and Sort: `Sorting options, number of items per page option, and link/grid option are centered or all on one line

  Screenshots

  `Previous | number of number | Next` are still on separate lines.

• [x] Expanded language options: when language options are expanded, the logo and 'libraries' do not break onto separate lines and the options look cohesive

  Screenshots

• [x] Expanded login options: when login options are expanded, the llogo and 'libraries' do not break onto separate lines and the options look cohesive
  Screenshots

  

[kirkkwang]

Clients are okay with Search bar content slightly cut-off at certain widths

[jillpe]

Clients confirmed search bar is okay in client meeting 2023-08-01. This passes SoftServ QA

[josh-morgan117]

Can we get the alignment fixed on these so there's not wonky spacing?

[ShanaLMoore]

TIMEBOX: 2 HRS

[kirkkwang]

@kidon0011 I'm looking into this spacing issue, do you have the link to this example?

[kirkkwang]

EDIT: never mind i found it!

@kidon0011 @jillpe this only thing i was able to find on production was this that matches the text, i cannot replicate to fix it, can I get the specific work you're looking at?

https://digitalcollections.lib.utk.edu/concern/images/40b0c17e-32ff-4deb-a1c5-d935bea81d15

[jillpe]

SoftServ QA: ✅

[josh-morgan117]

For this one I found an issue where if you are signed in and get the "All " dropdown in the search box, it hovers behind the text below it. Mark and I played around in the console and found a solution by adding a z-index of -1, at least in this case but maybe not all views.

[kirkkwang]

@kidon0011 cool thanks for the breadcrumbs, I ended up making adjustments at a higher level to make sure it worked for all cases (as far as I can tell)

[josh-morgan117]

This card passes with that fix. Thanks, @kirkkwang