memories/src/global.scss

body {
  overflow: hidden;
}

// Nextcloud 25+: get rid of gap and border radius at right
#content-vue.remove-gap {
  // was var(--body-container-radius)
  // now set on #app-navigation-vue
  border-radius: 0;
  width: calc(100% - var(--body-container-margin) * 1); // was *2

  // Reduce size of navigation. NC <25 doesn't like this on mobile.
  #app-navigation-vue {
    max-width: 250px;
  }
}

// Prevent content overflow on NC <25
#content-vue {
  max-height: 100vh;

  // https://bugs.webkit.org/show_bug.cgi?id=160953
  overflow: visible;
  #app-navigation-vue {
    border-top-left-radius: var(--body-container-radius);
    border-bottom-left-radius: var(--body-container-radius);
  }
}

// Top bar is above everything else on mobile
body.has-top-bar header {
  @media (max-width: 1024px) {
    z-index: 0 !important;
  }
}
body.has-viewer header {
  z-index: 0 !important;
}

// Hide horizontal scrollbar on mobile
// For the padding removal above
#app-content-vue {
  overflow-x: hidden;
}

// Fill all available space
.fill-block {
  width: 100%;
  height: 100%;
  display: block;
}

// Make popper menus full height
.v-popper--theme-dropdown .v-popper__inner {
  max-height: calc(90vh - 16px) !important; // was 50vh
  margin: 0 10px; // was unset
}

// Live photo transitions
:root {
  --livephoto-img-transition: opacity 0.4s linear, transform 0.3s ease-in-out;
}
.memories-livephoto {
  position: relative;
  overflow: hidden;

  img,
  video {
    position: absolute;
    padding: inherit;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: var(--livephoto-img-transition);
  }

  video,
  &.playing.canplay img {
    opacity: 0;
  }
  img,
  &.playing.canplay video {
    opacity: 1;
  }
  &.playing.canplay img {
    transform: scale(1.05);
  }
}

// Hide scrollbar
.recycler::-webkit-scrollbar {
  display: none;
  width: 0 !important;
}
.recycler {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

// Make metadata tab scrollbar thin
#tab-memories-metadata {
  scrollbar-width: thin;
  &::-webkit-scrollbar {
    width: 5px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
}

// Make sure empty content is full width
[role="note"].empty-content {
  width: 100%;
}