From 01a75568ce6dcd24b0e72d6e880412c3046431db Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Sun, 7 Jun 2026 21:53:22 -0400
Subject: [PATCH] tweaks

---
 .../ApiKeyNew/components/ExpiryDatePicker.tsx   | 17 +----------------
 app/scenes/ApiKeyNew/index.tsx                  |  2 +-
 shared/editor/components/Mentions.tsx           |  7 +++----
 3 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/app/scenes/ApiKeyNew/components/ExpiryDatePicker.tsx b/app/scenes/ApiKeyNew/components/ExpiryDatePicker.tsx
index eee6cdfc0c..516e9985da 100644
--- a/app/scenes/ApiKeyNew/components/ExpiryDatePicker.tsx
+++ b/app/scenes/ApiKeyNew/components/ExpiryDatePicker.tsx
@@ -1,5 +1,4 @@
 import { format as formatDate } from "date-fns";
-import { CalendarIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -36,7 +35,7 @@ const ExpiryDatePicker = ({ selectedDate, onSelect }: Props) => {
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger>
-        <StyledPopoverButton icon={<Icon />} neutral>
+        <StyledPopoverButton neutral>
           {selectedDate
             ? formatDate(selectedDate, "MMM dd, yyyy", { locale })
             : t("Choose a date")}
@@ -61,23 +60,9 @@ const ExpiryDatePicker = ({ selectedDate, onSelect }: Props) => {
   );
 };
 
-const Icon = () => (
-  <IconWrapper>
-    <CalendarIcon />
-  </IconWrapper>
-);
-
 const StyledPopoverButton = styled(Button)`
   margin-top: 12px;
   width: 150px;
 `;
 
-const IconWrapper = styled.span`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-`;
-
 export default ExpiryDatePicker;
diff --git a/app/scenes/ApiKeyNew/index.tsx b/app/scenes/ApiKeyNew/index.tsx
index c2c503a347..53064de406 100644
--- a/app/scenes/ApiKeyNew/index.tsx
+++ b/app/scenes/ApiKeyNew/index.tsx
@@ -122,7 +122,7 @@ function ApiKeyNew({ onSubmit }: Props) {
           )}
           .
         </Text>
-        <Flex align="center" gap={16}>
+        <Flex align="center" gap={8}>
           <StyledExpirySelect
             options={expiryOptions}
             value={expiryType}
diff --git a/shared/editor/components/Mentions.tsx b/shared/editor/components/Mentions.tsx
index ed7b42fe1f..2d6383f9fa 100644
--- a/shared/editor/components/Mentions.tsx
+++ b/shared/editor/components/Mentions.tsx
@@ -545,7 +545,7 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
     [onChangeDate]
   );
 
-  const trigger = (
+  const content = (
     <DateMention
       {...attrs}
       className={cn(className, {
@@ -558,7 +558,7 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
   );
 
   if (!isEditable) {
-    return trigger;
+    return content;
   }
 
   return (
@@ -567,7 +567,7 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
         asChild
         onMouseDown={(e) => e.stopPropagation()}
       >
-        {trigger}
+        {content}
       </PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
@@ -577,7 +577,6 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
           aria-label={t("Choose a date")}
           onOpenAutoFocus={(e) => e.preventDefault()}
         >
-          {/* Lock page scroll while open, matching the inline editor menu. */}
           <RemoveScroll as={Slot} allowPinchZoom>
             <DatePopoverContent>
               <Calendar