ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Settings: Fix color picker on small panel sizes (#6360)

Browse Source 
Co-authored-by: zubiden <19638254+zubiden@users.noreply.github.com>
This commit is contained in:
Alexander Zinchuk 2025-10-15 19:57:13 +02:00
parent 730944e988
commit ff0d9edc73
2 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/left/settings/folders/SettingsFolders.scss
View File

@ -118,24 +118,40 @@
}
.color-picker {
overflow-x: auto;
display: flex;
gap: 1rem;
gap: 0.75rem;
align-items: center;
min-height: 3rem;
padding: 0 1rem 1rem;
margin-inline: 1rem;
padding: 0.125rem;
}
.color-picker-header {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: space-between;
padding-inline-end: 1rem;
}
.color-picker-title-text,
.color-picker-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.color-picker-title {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline-end: 1rem;
flex-shrink: 0;
}
.color-picker-item {
cursor: pointer;
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
border: 0.125rem solid transparent;
@ -175,6 +191,7 @@
&:hover,
&:active {
border: 0.125rem solid var(--color-background);
outline: none;
box-shadow: 0 0 0 0.125rem currentColor;
}
}

9
src/components/left/settings/folders/SettingsFoldersEdit.tsx
View File

@ -356,9 +356,10 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
)}
<div className="settings-item pt-3">
<h4 className="settings-item-header mb-3 color-picker-title" dir={lang.isRtl ? 'rtl' : undefined}>
{lang('FilterColorTitle')}
<h4 className="settings-item-header mb-3 color-picker-header" dir={lang.isRtl ? 'rtl' : undefined}>
<span className="color-picker-title-text">{lang('FilterColorTitle')}</span>
<div className={buildClassName(
'color-picker-title',
'color-picker-selected-color',
isCurrentUserPremium && state.folder.color !== undefined && state.folder.color !== -1
? getApiPeerColorClass({ color: state.folder.color })
@ -372,7 +373,7 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
})}
</div>
</h4>
<div className="color-picker">
<div className="color-picker custom-scroll-x">
{FOLDER_COLORS.map((color) => (
<button
key={color}
@ -417,7 +418,7 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
)}
</button>
</div>
<p className="settings-item-description mb-0" dir={lang.isRtl ? 'rtl' : undefined}>
<p className="settings-item-description mb-0 mt-3" dir={lang.isRtl ? 'rtl' : undefined}>
{lang('FilterColorHint')}
</p>
</div>