lbry-desktop/ui/scss/component/_expandable.scss

$COLLAPSED_HEIGHT: 120px;

.expandable--closed,
.expandable--open {
  margin-bottom: var(--spacing-s);
}

.expandable--closed {
  max-height: calc(#{$COLLAPSED_HEIGHT} * 3 / 4);
  overflow-y: hidden;
  position: relative;
  -webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}

.expandable--open {
  max-height: 100%;
}
Adjust comment fade-out height ## Issue 6944 Comment expansion sometimes doesn't reveal extra text (already showing everything) ## Fix Reconcile some constants between JS and CSS. 2021-09-27 05:00:49 +02:00			`$COLLAPSED_HEIGHT: 120px;`

Newnew (#2144) * Fixes * Fix top result * Added icons to React component * Trying to get icons to work * Icons * add icon-custom.jsx with buildIcon function * Icon fixes * Fixed subscription screen 2018-12-19 06:44:53 +01:00			`.expandable--closed,`
add comment support button 2018-11-07 23:44:38 +01:00			`.expandable--open {`
moonpay 2020-06-01 19:03:19 +02:00			`margin-bottom: var(--spacing-s);`
add comment support button 2018-11-07 23:44:38 +01:00			`}`

			`.expandable--closed {`
Fix warnings 2022-03-23 21:00:57 +01:00			`max-height: calc(#{$COLLAPSED_HEIGHT} * 3 / 4);`
refactor floatingUri to allow inline players in comments/markdown 2020-10-20 19:10:02 +02:00			`overflow-y: hidden;`
Newnew (#2144) * Fixes * Fix top result * Added icons to React component * Trying to get icons to work * Icons * add icon-custom.jsx with buildIcon function * Icon fixes * Fixed subscription screen 2018-12-19 06:44:53 +01:00			`position: relative;`
Expandable: Fade out section when 'closed' ## Issue The abrupt cut-off of the expandable section bugs me (looks like a rendering glitch), especially when it cuts off in the middle of a line. ## Change In addition to the existing 'More' button, we fade out the section to provide additional visual cues. ## Approach This solution doesn't require the background color to be known, so it will work regardless where <Expandable> is used, or whatever color-scheme is chosen. However, it does utilize non-standard css -- for older browsers, it should simply cut-off like the before. 2020-09-11 17:42:20 +02:00			`-webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));`
add comment support button 2018-11-07 23:44:38 +01:00			`}`

Newnew (#2144) * Fixes * Fix top result * Added icons to React component * Trying to get icons to work * Icons * add icon-custom.jsx with buildIcon function * Icon fixes * Fixed subscription screen 2018-12-19 06:44:53 +01:00			`.expandable--open {`
			`max-height: 100%;`
add comment support button 2018-11-07 23:44:38 +01:00			`}`