[Open WebUI] 저장 버튼 스피너 인라인 레이아웃 수정

PR 링크: open-webui/open-webui#22227 상태: Merged | 변경: +36 / -36

들어가며

Open WebUI의 다양한 모달(AddConnection, AddToolServer, Import, Settings 등)에서 저장 버튼을 클릭하면 로딩 스피너가 표시됩니다. 기존에는 스피너가 div에 ml-2 self-center 클래스로 감싸져 있었는데, 이로 인해 스피너가 표시될 때 버튼의 높이가 변하거나 텍스트가 줄바꿈되는 레이아웃 문제가 있었습니다.

핵심 코드 분석

버튼 컨테이너 클래스 변경

Before:

<button
    class="... flex flex-row space-x-1 items-center {loading ? ' cursor-not-allowed' : ''}"
>
    {$i18n.t('Save')}
    {#if loading}
        <div class="ml-2 self-center">
            <Spinner />
        </div>
    {/if}
</button>

After:

<button
    class="... flex items-center gap-2 whitespace-nowrap {loading ? ' cursor-not-allowed' : ''}"
>
    {$i18n.t('Save')}
    {#if loading}
        <span class="shrink-0">
            <Spinner />
        </span>
    {/if}
</button>

왜 이게 좋은가

• 레이아웃 안정성: whitespace-nowrap으로 텍스트 줄바꿈을 방지하고, shrink-0으로 스피너가 축소되지 않게 합니다.
• 일관된 간격: space-x-1과 ml-2의 혼용 대신 gap-2로 통일하여 일관된 간격을 유지합니다.
• 시맨틱 마크업: 인라인 요소인 스피너를 div 대신 span으로 감싸 시맨틱을 개선합니다.
• 8개 컴포넌트 일괄 수정: AddConnectionModal, AddToolServerModal, ImportModal, Images, ModelSettingsModal, EditGroupModal, AddUserModal, WebhooksModal에 동일한 패턴이 적용됩니다.

참고 자료

• PR #22227 - fix: keep save button spinner inline