모바일에서 인용구 바 정렬 문제

[Don]

안녕하세요

모바일에서 인용 바 버튼에 이전보다 더 많은 옵션이 추가되었습니다. 이제 인용 복사와 AI에게 질문 버튼도 있어 버튼 영역이 더 넓어졌고, 작은 화면에서는 특히 이러한 라벨의 번역이 긴 언어의 경우 화면 밖으로 쉽게 넘칠 수 있습니다.

헝가리어의 경우 훨씬 더 심합니다…

가장 좋은 해결책 중 하나는 버튼을 세로 방향으로 정렬하는 것일 것입니다. 현재 버튼은 *(composer, modal, toast)*를 트리거하고 인용 바를 닫습니다. 이전에는 *(Edit, Ask AI)*의 경우 인용 바가 열려 있는 상태였습니다. 이렇게 하면 더 많은 여유 공간이 생기고 버튼 조작이 훨씬 쉬워집니다.

다음과 같은 형태입니다:

모바일 / CSS

.quote-button {
  .buttons {
    flex-direction: column;
    > *:not(:last-child) {
      border-bottom: 1px solid var(--primary-low);
    }
    > .btn,
    .ai-post-helper__trigger {
      width: 100%;
      padding: 0.65em;
      justify-content: flex-start;
    }        
  }
}

[Moin]

Hide text in text select popup menu - Feedback 링크 앞의 텍스트를 제거하는 디자인 실험이 있었어요. 하지만 저는 당신의 해결책이 훨씬 더 마음에 들어요!

[chapoi]

현재 구현 방식이 아쉬운 부분이 있다는 지적에 전적으로 동의합니다.

제안하신 방식은 첫인상부터 마음에 듭니다. 하지만 오른쪽 가장자리의 단어(예: 이 경우의 “pretty”)나 더 큰 텍스트 조각을 선택했을 때 어떻게 동작할까요? 이 두 가지 상황 모두 화면 밖으로 밀려날 수 있습니다. 일반적으로 이러한 요소의 위치 지정은 어려운 부분인 경우가 많습니다.

가능하다면 스크린샷 외에도 실제로 동작하는 모습을 보고 싶습니다.

(하지만 현재 가로 방향 오버플로 문제는 확실히 수정해야 합니다!)

[Don]

@chapoi

하지만 오른쪽 가장자리의 단어(예를 들어 이 경우의 “pretty”)나 더 큰 텍스트 조각을 선택할 때 어떻게 동작하나요? 두 상황 모두 화면 밖으로 밀려날 수 있습니다. 일반적으로 이러한 요소들의 위치 지정은 어려운 부분인 경우가 많습니다.

꽤 잘 정렬됩니다.

테마 생성자 데모입니다: Theme Creator

[chapoi]

이 커밋에서 코어에 유사한 해결책을 추가했습니다.

@Don 님, 알려주셔서 감사합니다!