Tweaked chapter list item styles

- Improves animation smoothness
- Changed animation slideup/down animations to use max-height instead of height
  to better avoid jutter at the end.
- Cleaned spacing to match page items in books listing.

resources/js/components/chapter-toggle.js

@@ -12,14 +12,14 @@ class ChapterToggle {
         const list = this.elem.parentNode.querySelector('.inset-list');
         this.elem.classList.add('open');
         this.elem.setAttribute('aria-expanded', 'true');
-        slideDown(list, 240);
+        slideDown(list, 180);
     }
 
     close() {
         const list = this.elem.parentNode.querySelector('.inset-list');
         this.elem.classList.remove('open');
         this.elem.setAttribute('aria-expanded', 'false');
-        slideUp(list, 240);
+        slideUp(list, 180);
     }
 
     click(event) {

resources/js/services/animations.js

@@ -49,7 +49,7 @@ export function slideUp(element, animTime = 400) {
     const currentPaddingTop = computedStyles.getPropertyValue('padding-top');
     const currentPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
     const animStyles = {
-        height: [`${currentHeight}px`, '0px'],
+        maxHeight: [`${currentHeight}px`, '0px'],
         overflow: ['hidden', 'hidden'],
         paddingTop: [currentPaddingTop, '0px'],
         paddingBottom: [currentPaddingBottom, '0px'],
@@ -73,7 +73,7 @@ export function slideDown(element, animTime = 400) {
     const targetPaddingTop = computedStyles.getPropertyValue('padding-top');
     const targetPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
     const animStyles = {
-        height: ['0px', `${targetHeight}px`],
+        maxHeight: ['0px', `${targetHeight}px`],
         overflow: ['hidden', 'hidden'],
         paddingTop: ['0px', targetPaddingTop],
         paddingBottom: ['0px', targetPaddingBottom],