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