Use a modal instead of dropdown on small screens

packages/web/components/templates/article/ArticleActionsMenu.tsx

@@ -4,7 +4,7 @@ import { ArticleAttributes } from "../../../lib/networking/queries/useGetArticle
 import { useGetUserPreferences } from "../../../lib/networking/queries/useGetUserPreferences"
 import { Button } from "../../elements/Button"
 import { Dropdown } from "../../elements/DropdownElements"
-import { Box } from "../../elements/LayoutPrimitives"
+import { Box, SpanBox } from "../../elements/LayoutPrimitives"
 import { TooltipWrapped } from "../../elements/Tooltip"
 import { styled, theme } from "../../tokens/stitches.config"
 import { EditLabelsControl } from "./EditLabelsControl"
@@ -84,32 +84,40 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
 
       <MenuSeparator layout={props.layout} />
 
-      <ActionDropdown
-        layout={props.layout}
-        triggerElement={
-          <TooltipWrapped
-            tooltipContent="Edit Tags"
-            tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
-        >
-          <TagSimple size={24} color={theme.colors.readerFont.toString()} />
-        </TooltipWrapped>
-        }
+      <SpanBox css={{
+        'display': 'flex',
+        '@smDown': {
+          display: 'none',
+        }}}
       >
-        <EditLabelsControl
-          article={props.article}
-          articleActionHandler={props.articleActionHandler}
-        />
-      </ActionDropdown>
-{/* 
-      <Button onClick={() => props.articleActionHandler('editLabels')} css={{
-        // '@smDown': {
-        //   display: 'none',
-        // },
+        <ActionDropdown
+          layout={props.layout}
+          triggerElement={
+            <TooltipWrapped
+              tooltipContent="Edit Tags"
+              tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+          >
+            <TagSimple size={24} color={theme.colors.readerFont.toString()} />
+          </TooltipWrapped>
+          }
+        >
+          <EditLabelsControl
+            article={props.article}
+            articleActionHandler={props.articleActionHandler}
+          />
+        </ActionDropdown>
+      </SpanBox>
+
+      <Button style='articleActionIcon'
+        onClick={() => props.articleActionHandler('editLabels')}
+        css={{
+          'display': 'none',
+          '@smDown': {
+            display: 'flex',
+          },
       }}>
-        <SpanBox css={{ width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>
           <TagSimple size={24} color={theme.colors.readerFont.toString()} />
-        </SpanBox>
-      </Button> */}
+      </Button>
 
       <Button style='articleActionIcon' onClick={() => props.articleActionHandler('showHighlights')}>
         <TooltipWrapped

packages/web/components/templates/article/ArticleContainer.tsx

@@ -15,7 +15,6 @@ import { updateThemeLocally } from '../../../lib/themeUpdater'
 import { ArticleMutations } from '../../../lib/articleActions'
 import { LabelChip } from '../../elements/LabelChip'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
-import { HighlightsModal } from './HighlightsModal'
 
 type ArticleContainerProps = {
   article: ArticleAttributes

packages/web/components/templates/article/EditLabelsControl.tsx

@@ -15,7 +15,7 @@ import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMu
 import { createLabelMutation } from '../../../lib/networking/mutations/createLabelMutation'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { randomLabelColorHex } from '../../../utils/settings-page/labels/labelColorObjects'
-import Router, { useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 
 type EditLabelsControlProps = {
   article: ArticleAttributes
@@ -163,19 +163,22 @@ function EditLabelsButtonFooter(props: EditLabelsButtonFooterProps): JSX.Element
   return (
     <HStack
       ref={ref}
-      distribution="start"  alignment="center" css={{
-      ml: '20px', gap: '8px', width: '100%', fontSize: '12px', p: '8px', height: '42px',
-      bg: props.focused ? '$grayBgActive' : 'unset',
-      'a:link': {
-        textDecoration: 'none',
-      },
-      'a:visited': {
-        color: theme.colors.grayText.toString(),
-      },
-    }}
+      distribution="start"  alignment="center"
+      css={{
+        width: '100%', height: '42px',
+        bg: props.focused ? '$grayBgActive' : 'unset',
+        'a:link': {
+          textDecoration: 'none',
+        },
+        'a:visited': {
+          color: theme.colors.grayText.toString(),
+        },
+      }}
   >
-    <PencilSimple size={18} color={theme.colors.grayText.toString()} />
-    <Link href="/settings/labels">Edit labels</Link>
+    <SpanBox css={{ display: 'flex', fontSize: '12px', padding: '33px', gap: '8px' }}>
+      <PencilSimple size={18} color={theme.colors.grayText.toString()} />
+      <Link href="/settings/labels">Edit labels</Link>
+    </SpanBox>
   </HStack>
   )
 }
@@ -296,7 +299,8 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
       onKeyDown={handleKeyDown}
       css={{ 
         p: '0',
-        maxHeight: '92%',
+        width: '100%',
+        maxHeight: '80%',
     }}>
       <Header
         focused={focusedIndex === undefined}

packages/web/components/templates/article/EditLabelsModal.tsx

@@ -1,21 +1,55 @@
+import { X } from 'phosphor-react'
+import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
+import { Button } from '../../elements/Button'
+import { CrossIcon } from '../../elements/images/CrossIcon'
+import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
 import {
   ModalRoot,
   ModalOverlay,
   ModalContent,
 } from '../../elements/ModalPrimitives'
+import { StyledText } from '../../elements/StyledText'
+import { theme } from '../../tokens/stitches.config'
 import { EditLabelsControl } from './EditLabelsControl'
 
-export function EditLabelsModal(): JSX.Element {
+type EditLabelsModalProps = {
+  article: ArticleAttributes
+  onOpenChange: (open: boolean) => void
+  articleActionHandler: (action: string, arg?: unknown) => void
+}
+
+export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
   return (
-    <ModalRoot defaultOpen>
+    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
       <ModalContent
         onPointerDownOutside={(event) => {
           event.preventDefault()
         }}
-        css={{ overflow: 'auto', p: '0' }}
+        css={{ overflow: 'auto', p: '0', width: '100%' }}
       >
-        {/* <EditLabelsControl /> */}
+        <VStack css={{ width: '100%' }}>
+          <HStack
+              distribution="between"
+              alignment="center"
+              css={{ width: '100%' }}
+            >
+              <StyledText style="modalHeadline" css={{ pl: '16px' }}>Labels</StyledText>
+              <Button
+                css={{ pt: '16px', pr: '16px' }}
+                style="ghost"
+                onClick={() => {
+                  props.onOpenChange(false)
+                }}
+              >
+                <CrossIcon
+                  size={14}
+                  strokeColor={theme.colors.grayText.toString()}
+                />
+              </Button>
+          </HStack>
+          <EditLabelsControl {...props} />
+        </VStack>
       </ModalContent>
     </ModalRoot>
   )

packages/web/pages/[username]/[slug]/index.tsx

@@ -27,6 +27,8 @@ import { setLinkArchivedMutation } from '../../../lib/networking/mutations/setLi
 import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { useSWRConfig } from 'swr'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import { EditLabelsControl } from '../../../components/templates/article/EditLabelsControl'
+import { EditLabelsModal } from '../../../components/templates/article/EditLabelsModal'
 
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
@@ -46,6 +48,7 @@ export default function Home(): JSX.Element {
   const [fontSize, setFontSize] = useState(preferencesData?.fontSize ?? 20)
   const [marginWidth, setMarginWidth] = useState(preferencesData?.margin ?? 360)
   const [lineHeight, setLineHeight] = useState(preferencesData?.lineHeight ?? 150)
+  const [showEditLabelsModal, setShowEditLabelsModal] = useState(false)
 
   const { articleData } = useGetArticleQuery({
     username: router.query.username as string,
@@ -131,6 +134,10 @@ export default function Home(): JSX.Element {
         }
         break
       }
+      case 'editLabels': {
+        setShowEditLabelsModal(true)
+        break
+      }
       case 'resetReaderSettings': {
         updateFontSize(20)
         updateMarginWidth(360)
@@ -230,6 +237,14 @@ export default function Home(): JSX.Element {
               />
               </VStack>
             )}
+
+        {showEditLabelsModal && (
+          <EditLabelsModal
+            article={article}
+            articleActionHandler={actionHandler}
+            onOpenChange={() => setShowEditLabelsModal(false)}
+          />
+        )}
       </PrimaryLayout>
     )
   }