fix(frontend/friendly): スクロールしてもウィジェットボタンが隠れない問題

CHANGELOG_CHERRYPICK.md

@@ -39,6 +39,7 @@
 - Enhance: 「모달에 흐림 효과 사용」옵션이 비활성화된 경우, 이미지를 탭하여 표시할 때 표시되는 배경을 어둡게 조정
 - Fix: (Friendly) 흐림 효과를 사용할 때 하단 내비게이션 바의 가독성이 매우 떨어지는 문제
 - Fix: (Friendly) 위젯 버튼에서「UI 애니메이션 줄이기」옵션이 적용되지 않는 문제
+- Fix: (Friendly) 스크롤을 해도 위젯 버튼이 숨겨지지 않는 문제
 - Fix: 움직임이 있는 MFM 설정을 사용하지 않아도 `$[rainbow ]`문자를 볼 수 있음 (misskey-dev/misskey#11361)
 - Fix: 모바일에서 헤더의 디자인을 변경하면 흐림 효과가 강제됨
 - Fix: 환경설정 백업 시 일부 설정이 누락되어 백업되는 문제

packages/frontend/src/ui/friendly.vue

@@ -517,10 +517,15 @@ $float-button-size: 65px;
 	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
 	font-size: 22px;
 	background: var(--panel);
+  transition: opacity 0.5s, transform 0.5s;
 
   &.reduceAnimation {
     transition: opacity 0s, transform 0s;
   }
+
+  &.showEl {
+    transform: translateX(100px);
+  }
 }
 
 .widgetsDrawerBg {