BUG: public link image share, footer overlaps with scrollbar:

[juliusknorr]

[jancborchardt]

@juliushaertl I assume the screenshot/report is out of date, as we worked on a different design for the footer? :)

[danxuliu]

Note that this is not limited to image shares, it happens with any preview.

You may need to reduce the height of the window to notice it, and also try with a file share, as the summary of the file list in folder shares is too tall and prevents a visual overlap (although the overlap is still there).

The content height is the full height minus the header and a little margin at the bottom to show the background, so it "stretches" to the bottom of the page. However, the footer in public pages is fixed at the bottom (with a little margin to show the background), so it overlaps the lower 65px of the content, and therefore hides the lower part of the preview (in the case of file shares, the Download button).

Besides that, there is also a rule to set the minimum height of the content to the full height minus the footer height; that may need to be tweaked as well.

[szaimen]

@juliushaertl I assume the screenshot/report is out of date, as we worked on a different design for the footer? :)

How should it look like? Can you post a screenshot of the mockup?

[szaimen]

ping @jancborchardt :)

[jancborchardt]

Current	Proposed design

Changes I made

#body-public footer {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  flex-direction: column;
  bottom: 8px;
  width: 100%;
}

And needed to add a div in the footer, and then:

#body-public footer div {
  background-color: var(--color-main-background);
  border-radius: var(--border-radius-large);
  padding: 4px 12px;
  border: 2px solid var(--color-border);
}

And there needs to be margin on the bottom of the share page to accomodate the floating footer when you scroll down so it does not overlap:

#files-public-content {
  flex-grow: 1;
  margin-bottom: 150px;
}

[szaimen]

Looks great! Can you create a PR? :)

[jancborchardt]

I mean even better would actually be if it’s just below the content, not permanently displayed. Cause currently on small displays, a significant amount of the image or share is overlapped. :\

[jancborchardt]

This is also how we had it before the ui change, so I assume this has to do with how the containers now work?

[szaimen]

I'll check this later!

I mean even better would actually be if it’s just below the content, not permanently displayed

[szaimen]

This seems to fixes it:

#imgframe img {
    max-height: calc(100vh - var(--header-height) - 270px) !important;
    width: unset !important;
}

#imgframe video {
    max-height: calc(100vh - var(--header-height) - 270px) !important;
}


#imgframe .text-preview {
overflow-y: scroll !important;
}

.app-files_sharing #app-content {
    max-height: calc(100vh - var(--header-height) - 65px);
}