diff --git a/app/components/IconPicker.tsx b/app/components/IconPicker.tsx
index 40415d587..18096c126 100644
--- a/app/components/IconPicker.tsx
+++ b/app/components/IconPicker.tsx
@@ -257,7 +257,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
             );
           })}
         </Icons>
-        <Flex>
+        <Colors>
           <React.Suspense fallback={<Loading>{t("Loading")}…</Loading>}>
             <ColorPicker
               color={color}
@@ -266,6 +266,10 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
               triangle="hide"
               styles={{
                 default: {
+                  body: {
+                    padding: 0,
+                    marginRight: -8,
+                  },
                   hash: {
                     color: theme.text,
                     background: theme.inputBorder,
@@ -279,7 +283,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
               }}
             />
           </React.Suspense>
-        </Flex>
+        </Colors>
       </ContextMenu>
     </Wrapper>
   );
@@ -289,12 +293,16 @@ const Icon = styled.svg`
   transition: fill 150ms ease-in-out;
 `;
 
+const Colors = styled(Flex)`
+  padding: 8px;
+`;
+
 const Label = styled.label`
   display: block;
 `;
 
 const Icons = styled.div`
-  padding: 16px 8px 0 16px;
+  padding: 8px;
 
   ${breakpoint("tablet")`
     width: 276px;
@@ -321,11 +329,7 @@ const Loading = styled(Text)`
 const ColorPicker = styled(TwitterPicker)`
   box-shadow: none !important;
   background: transparent !important;
-  width: auto !important;
-
-  ${breakpoint("tablet")`
-    width: 276px;
-  `};
+  width: 100% !important;
 `;
 
 const Wrapper = styled("div")`
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index e97275a88..69564be6b 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -30,6 +30,7 @@
   "Duplicate": "Duplicate",
   "Duplicate document": "Duplicate document",
   "Document duplicated": "Document duplicated",
+  "collection": "collection",
   "Pin to {{collectionName}}": "Pin to {{collectionName}}",
   "Pinned to collection": "Pinned to collection",
   "Pin to home": "Pin to home",
@@ -329,7 +330,6 @@
   "Delete group": "Delete group",
   "Group options": "Group options",
   "Member options": "Member options",
-  "collection": "collection",
   "New child document": "New child document",
   "New document in <em>{{ collectionName }}</em>": "New document in <em>{{ collectionName }}</em>",
   "New template": "New template",