Исправлена мобильная адаптивность для кнопок в flex-контейнерах
Добавлено свойство flexWrap: "wrap" во все flex-контейнеры с кнопками, которые переполнялись на мобильных экранах. Теперь кнопки переносятся на новую строку вместо сжатия при ограниченной ширине окна. Исправленные места: - TwoFactorSetup: группа кнопок отключения (строка 310) и кнопки включения/отмены (строка 258) - LoginPage: кнопки верификации 2FA (строка 275) - InstallPrompt: кнопки установки/закрытия (строка 125) - GenerateTagsModal: кнопки выбрать все/снять все (строка 142) - NoteEditor: контейнер приватности заметки (строка 1084) - PublicProfilePage: строка аватара и информации профиля (строка 130) Каждая кнопка теперь имеет flex: "1 1 auto" с подходящим minWidth для сохранения пропорций при переносе. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
12c0870c8f
commit
daa1c14d11
@ -122,7 +122,7 @@ export const InstallPrompt: React.FC = () => {
|
|||||||
Установите приложение для быстрого доступа
|
Установите приложение для быстрого доступа
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: "flex", gap: "8px" }}>
|
<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
|
||||||
<button
|
<button
|
||||||
onClick={handleInstallClick}
|
onClick={handleInstallClick}
|
||||||
style={{
|
style={{
|
||||||
@ -137,6 +137,8 @@ export const InstallPrompt: React.FC = () => {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: "6px",
|
gap: "6px",
|
||||||
|
flex: "1 1 auto",
|
||||||
|
minWidth: "100px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Icon icon="mdi:download" width="18" height="18" />
|
<Icon icon="mdi:download" width="18" height="18" />
|
||||||
@ -154,6 +156,7 @@ export const InstallPrompt: React.FC = () => {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
opacity: 0.6,
|
opacity: 0.6,
|
||||||
|
flex: "0 0 auto",
|
||||||
}}
|
}}
|
||||||
aria-label="Закрыть"
|
aria-label="Закрыть"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -139,18 +139,18 @@ export const GenerateTagsModal: React.FC<GenerateTagsModalProps> = ({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<h4 style={{ margin: 0, fontSize: "16px" }}>Предлагаемые теги:</h4>
|
<h4 style={{ margin: 0, fontSize: "16px" }}>Предлагаемые теги:</h4>
|
||||||
<div style={{ display: "flex", gap: "10px" }}>
|
<div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
|
||||||
<button
|
<button
|
||||||
className="btn-secondary"
|
className="btn-secondary"
|
||||||
onClick={handleSelectAll}
|
onClick={handleSelectAll}
|
||||||
style={{ fontSize: "12px", padding: "5px 10px" }}
|
style={{ fontSize: "12px", padding: "5px 10px", flex: "1 1 auto", minWidth: "100px" }}
|
||||||
>
|
>
|
||||||
Выбрать все
|
Выбрать все
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="btn-secondary"
|
className="btn-secondary"
|
||||||
onClick={handleDeselectAll}
|
onClick={handleDeselectAll}
|
||||||
style={{ fontSize: "12px", padding: "5px 10px" }}
|
style={{ fontSize: "12px", padding: "5px 10px", flex: "1 1 auto", minWidth: "100px" }}
|
||||||
>
|
>
|
||||||
Снять все
|
Снять все
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -1081,8 +1081,8 @@ export const NoteEditor: React.FC<NoteEditorProps> = ({ onSave }) => {
|
|||||||
<FileUpload files={files} onChange={setFiles} />
|
<FileUpload files={files} onChange={setFiles} />
|
||||||
|
|
||||||
{user?.is_public_profile === 1 && (
|
{user?.is_public_profile === 1 && (
|
||||||
<div className="privacy-toggle-container" style={{ marginBottom: "10px", display: "flex", alignItems: "center", gap: "10px" }}>
|
<div className="privacy-toggle-container" style={{ marginBottom: "10px", display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap" }}>
|
||||||
<label style={{ display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" }}>
|
<label style={{ display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flex: "1 1 auto" }}>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={isPrivate}
|
checked={isPrivate}
|
||||||
|
|||||||
@ -255,11 +255,12 @@ export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: "flex", gap: "10px" }}>
|
<div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
|
||||||
<button
|
<button
|
||||||
className="btnSave"
|
className="btnSave"
|
||||||
onClick={handleEnable}
|
onClick={handleEnable}
|
||||||
disabled={isLoading || verificationCode.length !== 6}
|
disabled={isLoading || verificationCode.length !== 6}
|
||||||
|
style={{ flex: "1 1 auto", minWidth: "120px" }}
|
||||||
>
|
>
|
||||||
{isLoading ? "Включение..." : "Включить 2FA"}
|
{isLoading ? "Включение..." : "Включить 2FA"}
|
||||||
</button>
|
</button>
|
||||||
@ -270,6 +271,7 @@ export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
|
|||||||
setVerificationCode("");
|
setVerificationCode("");
|
||||||
}}
|
}}
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
|
style={{ flex: "1 1 auto", minWidth: "100px" }}
|
||||||
>
|
>
|
||||||
Отмена
|
Отмена
|
||||||
</button>
|
</button>
|
||||||
@ -305,11 +307,12 @@ export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
|
|||||||
<p style={{ color: "#666", fontSize: "14px", marginBottom: "15px" }}>
|
<p style={{ color: "#666", fontSize: "14px", marginBottom: "15px" }}>
|
||||||
Двухфакторная аутентификация активна для вашего аккаунта.
|
Двухфакторная аутентификация активна для вашего аккаунта.
|
||||||
</p>
|
</p>
|
||||||
<div style={{ display: "flex", gap: "10px" }}>
|
<div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
|
||||||
<button
|
<button
|
||||||
className="btnSave"
|
className="btnSave"
|
||||||
onClick={handleGenerateBackupCodes}
|
onClick={handleGenerateBackupCodes}
|
||||||
disabled={isGeneratingBackupCodes}
|
disabled={isGeneratingBackupCodes}
|
||||||
|
style={{ flex: "1 1 auto", minWidth: "200px" }}
|
||||||
>
|
>
|
||||||
{isGeneratingBackupCodes ? (
|
{isGeneratingBackupCodes ? (
|
||||||
<>
|
<>
|
||||||
@ -324,6 +327,7 @@ export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
|
|||||||
<button
|
<button
|
||||||
className="btn-danger"
|
className="btn-danger"
|
||||||
onClick={() => setShowDisableModal(true)}
|
onClick={() => setShowDisableModal(true)}
|
||||||
|
style={{ flex: "1 1 auto", minWidth: "140px" }}
|
||||||
>
|
>
|
||||||
<Icon icon="mdi:shield-off" /> Отключить 2FA
|
<Icon icon="mdi:shield-off" /> Отключить 2FA
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -272,11 +272,12 @@ const LoginPage: React.FC = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: "flex", gap: "10px" }}>
|
<div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btnSave"
|
className="btnSave"
|
||||||
disabled={isLoading || !twoFactorCode.trim()}
|
disabled={isLoading || !twoFactorCode.trim()}
|
||||||
|
style={{ flex: "1 1 auto", minWidth: "120px" }}
|
||||||
>
|
>
|
||||||
{isLoading ? "Проверка..." : "Продолжить"}
|
{isLoading ? "Проверка..." : "Продолжить"}
|
||||||
</button>
|
</button>
|
||||||
@ -285,6 +286,7 @@ const LoginPage: React.FC = () => {
|
|||||||
className="btn-danger"
|
className="btn-danger"
|
||||||
onClick={handleBack}
|
onClick={handleBack}
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
|
style={{ flex: "1 1 auto", minWidth: "100px" }}
|
||||||
>
|
>
|
||||||
Назад
|
Назад
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -127,7 +127,7 @@ const PublicProfilePage: React.FC = () => {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
<header className="notes-header">
|
<header className="notes-header">
|
||||||
<div className="notes-header-left">
|
<div className="notes-header-left">
|
||||||
<div style={{ display: "flex", alignItems: "center", gap: "15px" }}>
|
<div style={{ display: "flex", alignItems: "center", gap: "15px", flexWrap: "wrap" }}>
|
||||||
{profile.avatar ? (
|
{profile.avatar ? (
|
||||||
<img
|
<img
|
||||||
src={profile.avatar}
|
src={profile.avatar}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user