2025-07-12 UI fix for parallel display

https://fathom.video/share/_mx1xze_s2gxmjZ9YsaBjsEN4ztsSTCC

Feature Request

1. in parallel display, rotate & move the expand button to a new place

   

   • solution: stanzaBlock.tsx: add a new ? : statement on classname

         <button
           key={"strophe" + stanzaProps.stanzaId + "Selector"}
           className={`p-2 m-1 hover:bg-theme active:bg-transparent`}
           onClick={() => handleCollapseBlockClick()}
           data-clicktype={'clickable'}
         >
           { ((!expanded && ctxIsHebrew) || (expanded && !ctxIsHebrew)) && <TbArrowBarLeft fontSize="1.1em" style={{pointerEvents:'none'}} /> }
           { ((!expanded && !ctxIsHebrew) || (expanded && ctxIsHebrew)) && <TbArrowBarRight className={`${ctxLanguageMode.Parallel ? 'rotate-[90deg]' : ''}`} fontSize="1.1em" style={{pointerEvents:'none'}} /> }
         </button>
   

2. See if this additional space can be removed

   • solution: add flex-grow: 0 to the stanza block

   

2025-07-07 Zoom In Out: Fit

old code

  const ScaleByFitScreen = () => {
    if (!fitScreen) {
      /*TODO: current layout is not steady, may need to update the calculation later */
      // calculate fit screen height
      const currentHeight = document.getElementById('selaPassage')?.offsetHeight;
      const headerHeight = document.getElementById("selaHeader")?.offsetHeight;
      const hardcodedPadding = 64; // <div class="top-16">;
      const fitScreenHeight = window.innerHeight - (headerHeight || 0) -  hardcodedPadding;
      const scale = Math.floor((currentHeight ? fitScreenHeight / currentHeight : 1) * 100) / 100;
      setScaleValueAndScalePassage(scale);
      setDisplayScaleLevel("Fit");
      setFitScreen(true);
    }
    setDropdownOpen(false);
  };

new code for inspection

  const ScaleByFitScreen = () => {
    if (!fitScreen) {
      /*TODO: current layout is not steady, may need to update the calculation later */
      // calculate fit screen height
      const selaPassage = document.getElementById('selaPassage');
      selaPassage?.classList.contains('singleLang') ? console.log('singleLang') : console.log('parallel');
      if (selaPassage?.classList.contains('singleLang')) {
        const currentHeight = selaPassage?.offsetHeight;
        const headerHeight = selaPassage?.offsetHeight;
        const hardcodedPadding = 64; // <div class="top-16">;
        const fitScreenHeight = window.innerHeight - (headerHeight || 0) -  hardcodedPadding;
        const scale = Math.floor((currentHeight ? fitScreenHeight / currentHeight : 1) * 100) / 100;
        setScaleValueAndScalePassage(scale);
      }
      else {
        setScaleValueAndScalePassage(1)
      }
      setDisplayScaleLevel("Fit");
      setFitScreen(true);
      
    }
    setDropdownOpen(false);
  };

2025-07-06

2025-06-29

Sela Project Parallel Display: Strophe select doest apply to both strophies

Sela Project: Zoom in doesnt work well in new Parallel update

2025-05-10