diff --git a/src/components/left/settings/folders/SettingsFolders.scss b/src/components/left/settings/folders/SettingsFolders.scss
index 9c46e4523..52cafa864 100644
--- a/src/components/left/settings/folders/SettingsFolders.scss
+++ b/src/components/left/settings/folders/SettingsFolders.scss
@@ -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;
   }
 }
diff --git a/src/components/left/settings/folders/SettingsFoldersEdit.tsx b/src/components/left/settings/folders/SettingsFoldersEdit.tsx
index b9e00295f..ef46cc1aa 100644
--- a/src/components/left/settings/folders/SettingsFoldersEdit.tsx
+++ b/src/components/left/settings/folders/SettingsFoldersEdit.tsx
@@ -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>