fix: Improve mobile responsive styling across application

src/components/AbstractDetails/AbstractDetails.tsx

@@ -44,6 +44,7 @@ interface IDetailProps<T = string | Array<string>> {
   newTab?: boolean;
   value: T;
   copiable?: boolean;
+  copyLabel?: string;
   children?: (value: T) => ReactElement;
 }
 
@@ -63,12 +64,25 @@ export const AbstractDetails = ({ doc }: IDetailsProps): ReactElement => {
   const { isOpen: isCitationOpen, onOpen: onCitationOpen, onClose: onCitationClose } = useDisclosure();
 
   return (
-    <Box as="section" border="1px" borderColor="gray.50" borderRadius="md" shadow="sm" aria-labelledby="details">
+    <Box
+      as="section"
+      border="1px"
+      borderColor="gray.50"
+      borderRadius="md"
+      shadow="sm"
+      aria-labelledby="details"
+      overflowX="hidden"
+    >
       <VisuallyHidden as="h2" id="details">
         Details
       </VisuallyHidden>
-      <Table colorScheme="gray" size="md" role="presentation">
-        <Tbody>
+      <Table
+        colorScheme="gray"
+        size={{ base: 'sm', md: 'md' }}
+        role="presentation"
+        display={{ base: 'block', md: 'table' }}
+      >
+        <Tbody display={{ base: 'block', md: 'table-row-group' }}>
           <Detail label="Publication" value={doc.pub_raw}>
             {(pub_raw) => (
               <>
@@ -100,7 +114,7 @@ export const AbstractDetails = ({ doc }: IDetailsProps): ReactElement => {
             href={createUrlByType(doc?.bibcode, 'arxiv', arxiv?.split(':')[1])}
             newTab
           />
-          <Detail label="Bibcode" value={doc.bibcode} copiable />
+          <Detail label="Bibcode" value={doc.bibcode} copiable copyLabel="Copy Bibcode" />
           <Collections collections={doc.database ?? []} />
           <Keywords keywords={doc.keyword} />
           <UATKeywords keywords={doc.uat} ids={doc.uat_id} />
@@ -117,7 +131,7 @@ export const AbstractDetails = ({ doc }: IDetailsProps): ReactElement => {
 
 // TODO: this should take in a list of deps or the whole doc and show/hide based on that
 const Detail = <T extends string | string[]>(props: IDetailProps<T>): ReactElement => {
-  const { label, href, newTab = false, value, copiable = false, children } = props;
+  const { label, href, newTab = false, value, copiable = false, copyLabel = 'Copy', children } = props;
 
   // show nothing if no value
   if (isNilOrEmpty(value)) {
@@ -127,9 +141,29 @@ const Detail = <T extends string | string[]>(props: IDetailProps<T>): ReactEleme
   const normalizedValue: string = Array.isArray(value) ? value.join('; ') : value;
 
   return (
-    <Tr>
-      <Td>{label}</Td>
-      <Td wordBreak="break-word">
+    <Tr
+      display={{ base: 'flex', md: 'table-row' }}
+      flexDirection={{ base: 'column', md: 'row' }}
+      py={{ base: 2, md: 0 }}
+    >
+      <Td
+        fontWeight={{ base: 'semibold', md: 'normal' }}
+        pb={{ base: 1, md: 4 }}
+        pt={{ base: 2, md: 4 }}
+        px={{ base: 2, md: 6 }}
+        border={{ base: 'none', md: '1px' }}
+        borderColor={{ md: 'inherit' }}
+      >
+        {label}
+      </Td>
+      <Td
+        wordBreak="break-word"
+        pt={{ base: 0, md: 4 }}
+        pb={{ base: 2, md: 4 }}
+        px={{ base: 2, md: 6 }}
+        border={{ base: 'none', md: '1px' }}
+        borderColor={{ md: 'inherit' }}
+      >
         {href && (
           <SimpleLink href={href} newTab={newTab}>
             {normalizedValue}
@@ -139,7 +173,7 @@ const Detail = <T extends string | string[]>(props: IDetailProps<T>): ReactEleme
           ? children(value)
           : !href && <span dangerouslySetInnerHTML={{ __html: normalizedValue }} />}
         {copiable && (
-          <Tooltip label="Copy" shouldWrapChildren>
+          <Tooltip label={copyLabel} shouldWrapChildren>
             <SimpleCopyButton text={normalizedValue as string} size="xs" variant="outline" mx={2} />
           </Tooltip>
         )}
@@ -184,9 +218,17 @@ const Keywords = memo(({ keywords }: { keywords: Array<string> }) => {
       {(keywords) => (
         <Flex flexWrap={'wrap'}>
           {keywords.map((keyword) => (
-            <Tag size="md" variant="subtle" whiteSpace="nowrap" m="1" px={2} py={1} key={keyword}>
-              <HStack spacing="1">
-                <Text>{keyword}</Text>
+            <Tag
+              size="md"
+              variant="subtle"
+              whiteSpace={{ base: 'normal', md: 'nowrap' }}
+              m="1"
+              px={2}
+              py={1}
+              key={keyword}
+            >
+              <HStack spacing="1" flexWrap="wrap">
+                <Text wordBreak="break-word">{keyword}</Text>
                 <SearchQueryLink
                   params={{ q: `keyword:"${keyword}"` }}
                   textDecoration="none"
@@ -227,8 +269,16 @@ const UATKeywords = memo(({ keywords, ids }: { keywords: Array<string>; ids: Arr
       {(keywords) => (
         <Flex flexWrap={'wrap'}>
           {keywords.map((keyword, index) => (
-            <Tag size="md" variant="subtle" whiteSpace="nowrap" m="1" px={2} py={1} key={keyword}>
-              <HStack spacing="1">
+            <Tag
+              size="md"
+              variant="subtle"
+              whiteSpace={{ base: 'normal', md: 'nowrap' }}
+              m="1"
+              px={2}
+              py={1}
+              key={keyword}
+            >
+              <HStack spacing="1" flexWrap="wrap">
                 <Tooltip label={keyword}>
                   <SimpleLink href={`https://astrothesaurus.org/uat/${encodeURIComponent(ids[index])}`} newTab>
                     {shortenKeyword(keyword)}
@@ -267,9 +317,9 @@ const Collections = memo(({ collections }: { collections: Array<string> }) => {
       {(collections) => (
         <Flex flexWrap={'wrap'}>
           {collections.map((collection) => (
-            <Tag size="md" variant="subtle" whiteSpace="nowrap" m="1" key={collection}>
-              <HStack spacing="2">
-                <Text>{collection}</Text>
+            <Tag size="md" variant="subtle" whiteSpace={{ base: 'normal', md: 'nowrap' }} m="1" key={collection}>
+              <HStack spacing="2" flexWrap="wrap">
+                <Text wordBreak="break-word">{collection}</Text>
                 <SearchQueryLink
                   params={{ q: `collection:"${collection}"` }}
                   textDecoration="none"
@@ -320,9 +370,9 @@ const Bibgroups = memo(({ bibgroups }: { bibgroups: Array<string> }) => {
       {(bibgroups) => (
         <Flex flexWrap={'wrap'}>
           {bibgroups.map((bibgroup) => (
-            <Tag size="md" variant="subtle" whiteSpace="nowrap" m="1" key={bibgroup}>
-              <HStack spacing="2">
-                <Text>{bibgroup}</Text>
+            <Tag size="md" variant="subtle" whiteSpace={{ base: 'normal', md: 'nowrap' }} m="1" key={bibgroup}>
+              <HStack spacing="2" flexWrap="wrap">
+                <Text wordBreak="break-word">{bibgroup}</Text>
                 <SearchQueryLink
                   params={{ q: `bibgroup:"${bibgroup}"` }}
                   textDecoration="none"
@@ -359,8 +409,16 @@ const PlanetaryFeatures = memo(({ features, ids }: { features: Array<string>; id
       {(features) => (
         <Flex flexWrap={'wrap'}>
           {features.map((feature, index) => (
-            <Tag size="md" variant="subtle" whiteSpace="nowrap" m="1" px={2} py={1} key={feature}>
-              <HStack spacing="1">
+            <Tag
+              size="md"
+              variant="subtle"
+              whiteSpace={{ base: 'normal', md: 'nowrap' }}
+              m="1"
+              px={2}
+              py={1}
+              key={feature}
+            >
+              <HStack spacing="1" flexWrap="wrap">
                 <SimpleLink
                   href={`${EXTERNAL_URLS.USGS_PLANETARY_FEATURES}${ids[index]}`}
                   aria-label={usgsLabel}

src/components/AbstractSideNav/AbstractSideNav.tsx

@@ -176,7 +176,10 @@ export const AbstractSideNav = (props: IAbstractSideNavProps): ReactElement => {
         menuItems={menuItems}
         activeItem={activeItem}
         display={{ base: 'initial', lg: 'none' }}
-        mx={2}
+        mx="auto"
+        maxW="400px"
+        w="full"
+        px={2}
       />
     </div>
   );

src/components/AuthorAffiliations/AuthorAffiliations.tsx

@@ -97,8 +97,8 @@ const AffiliationTable = (props: { query: IADSApiSearchParams; formState: AffTab
   }
 
   return (
-    <TableContainer>
-      <Table size="sm">
+    <TableContainer overflowX="auto">
+      <Table size="sm" minW="600px">
         <Thead>
           <Tr>
             <Th>#</Th>
@@ -205,7 +205,7 @@ const Row = (props: { context: IGroupedAuthorAffilationData; idx: number }) => {
           aria-label={`select author ${ctx.authorName}`}
         >
           <Tooltip label={ctx.authorName} aria-label={ctx.authorName}>
-            <Text isTruncated w="3xs">
+            <Text isTruncated w={{ base: '24', md: '3xs' }}>
               {ctx.authorName}
             </Text>
           </Tooltip>
@@ -224,7 +224,7 @@ const Row = (props: { context: IGroupedAuthorAffilationData; idx: number }) => {
               aria-label={`select affiliation ${aff} for author ${ctx.authorName}`}
             >
               <Tooltip label={aff} aria-label={aff}>
-                <Text isTruncated w={['xs', 'sm']}>
+                <Text isTruncated w={{ base: '28', sm: 'xs', md: 'sm' }}>
                   {aff === NONESYMBOL ? '(none)' : aff}
                 </Text>
               </Tooltip>
@@ -237,7 +237,7 @@ const Row = (props: { context: IGroupedAuthorAffilationData; idx: number }) => {
           {ctx.years.map((years, i) => (
             <li key={`years_${years.join(',')}_${i}`}>
               <Tooltip label={years.join(', ')} aria-label={years.join(', ')}>
-                <Text isTruncated w="24">
+                <Text isTruncated w={{ base: '16', md: '24' }}>
                   {years.join(', ')}
                 </Text>
               </Tooltip>

src/components/ClassicForm/ClassicForm.tsx

@@ -11,7 +11,6 @@ import {
   FormControl,
   FormHelperText,
   FormLabel,
-  HStack,
   Input,
   InputGroup,
   InputLeftElement,
@@ -102,7 +101,7 @@ export const ClassicForm = (props: IClassicFormProps) => {
         <FormControl as="fieldset">
           <FormLabel as="legend">Collection</FormLabel>
           <CheckboxGroup defaultValue={['astronomy', 'physics']}>
-            <HStack spacing="6">
+            <Stack direction={{ base: 'column', md: 'row' }} spacing={{ base: 2, md: 6 }}>
               <Checkbox value="astronomy" {...register('limit')}>
                 Astronomy
               </Checkbox>
@@ -115,7 +114,7 @@ export const ClassicForm = (props: IClassicFormProps) => {
               <Checkbox value="earthscience" {...register('limit')}>
                 Earth Science
               </Checkbox>
-            </HStack>
+            </Stack>
           </CheckboxGroup>
         </FormControl>
 
@@ -224,14 +223,14 @@ export const ClassicForm = (props: IClassicFormProps) => {
         <FormControl as="fieldset">
           <FormLabel as="legend">Property</FormLabel>
           <CheckboxGroup>
-            <HStack spacing={4}>
+            <Flex gap={{ base: 2, sm: 4 }} wrap="wrap">
               <Checkbox fontWeight="bold" value="refereed-only" {...register('property')}>
                 Refereed only
               </Checkbox>
               <Checkbox fontWeight="bold" value="articles-only" {...register('property')}>
                 Articles only
               </Checkbox>
-            </HStack>
+            </Flex>
           </CheckboxGroup>
         </FormControl>
 
@@ -338,10 +337,12 @@ const CurrentQuery = (props: { control: Control<IClassicFormState> }) => {
       title="Generated Query"
       defaultOpen
       description={
-        <HStack>
-          <Code>{query}</Code>
+        <Flex gap={2} wrap="wrap" alignItems="center">
+          <Code wordBreak="break-all" whiteSpace="pre-wrap">
+            {query}
+          </Code>
           {typeof query === 'string' ? <SimpleCopyButton text={query} /> : null}
-        </HStack>
+        </Flex>
       }
     ></Expandable>
   );

src/components/EmailNotifications/NotificationsPane.tsx

@@ -230,7 +230,7 @@ export const NotificationsPane = () => {
                     <Th w="30%">Name</Th>
                     <Th>Type</Th>
                     <Th>Frequency</Th>
-                    <Th>Updated</Th>
+                    {!isMobile && <Th>Updated</Th>}
                     {!isMobile && <Th>Actions</Th>}
                   </Tr>
                 </Thead>
@@ -245,9 +245,11 @@ export const NotificationsPane = () => {
                       <Td>{n.name}</Td>
                       <Td>{n.type === 'template' ? n.template : 'query'}</Td>
                       <Td>{n.frequency}</Td>
-                      <Td>
-                        <TimeSince date={n.updated} />
-                      </Td>
+                      {!isMobile && (
+                        <Td>
+                          <TimeSince date={n.updated} />
+                        </Td>
+                      )}
                       {!isMobile && (
                         <Td>
                           <Action

src/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, HStack, Text, VisuallyHidden } from '@chakra-ui/react';
+import { Box, Flex, Text, VisuallyHidden } from '@chakra-ui/react';
 
 import { FC } from 'react';
 import { EXTERNAL_URLS } from '@/config';
@@ -18,7 +18,7 @@ export const Footer: FC = () => {
       color="gray.50"
       sx={{ a: { color: 'gray.50' } }}
     >
-      <Flex direction="column" width="96" mx={5}>
+      <Flex direction="column" width={{ base: 'full', md: '96' }} mx={{ base: 3, sm: 5 }}>
         <Text fontWeight="semibold">
           © The{' '}
           <Text as="abbr" title="Smithsonian Astrophysical Observatory">
@@ -43,7 +43,7 @@ export const Footer: FC = () => {
           </Text>
         ) : null}
 
-        <HStack my={3} spacing={4}>
+        <Flex my={3} gap={{ base: 2, sm: 4 }} wrap="wrap" alignItems="center">
           <SimpleLink href={EXTERNAL_URLS.SMITHSONIAN_HOME_PAGE} variant="footer">
             <VisuallyHidden>Smithsonian Institution</VisuallyHidden>
             <SmithsonianLogo width="72.6px" height="72.6px" aria-hidden />
@@ -58,7 +58,7 @@ export const Footer: FC = () => {
             </VisuallyHidden>
             <NASAPartnerLogo width="96.8px" height="72.89px" aria-hidden />
           </SimpleLink>
-        </HStack>
+        </Flex>
 
         <Text fontStyle="italic" fontSize="xx-small">
           *The material contained in this document is based upon work supported by a National Aeronautics and Space

src/components/LandingTabs/LandingTabs.tsx

@@ -1,4 +1,4 @@
-import { Box, Center, Flex, HStack, Icon, Show, VisuallyHidden, Text, DarkMode } from '@chakra-ui/react';
+import { Box, Center, Flex, HStack, Icon, VisuallyHidden, Text, DarkMode } from '@chakra-ui/react';
 import { useStore } from '@/store';
 import { AppMode, ByADSModes } from '@/types';
 import Image from 'next/image';
@@ -91,15 +91,20 @@ const TitleLogo = () => {
 
   return (
     <Center>
-      <Show above="sm">
-        <Icon as={ScixAndNasaLogo_H} height="4em" width="25em" aria-hidden />
-        {ByADSModes.includes(mode) ? (
-          <>
-            <Text color="chakra-body-text">by ADS</Text>
-            <Image src="/images/ads-logo.svg" alt="ads logo" width={40} height={40} ml={3} />
-          </>
-        ) : null}
-      </Show>
+      <Icon
+        as={ScixAndNasaLogo_H}
+        height={{ base: '2.5em', sm: '4em' }}
+        width={{ base: '15em', sm: '25em' }}
+        aria-hidden
+      />
+      {ByADSModes.includes(mode) ? (
+        <>
+          <Text color="chakra-body-text" fontSize={{ base: 'sm', sm: 'md' }}>
+            by ADS
+          </Text>
+          <Image src="/images/ads-logo.svg" alt="ads logo" width={40} height={40} ml={3} />
+        </>
+      ) : null}
       <VisuallyHidden>Science Explorer</VisuallyHidden>
     </Center>
   );

src/components/Libraries/LibraryListTable.tsx

@@ -90,7 +90,7 @@ const columns: { id: Column; heading: string; sortable: boolean; hint?: string }
 ];
 
 // hide columns for small display
-const hideColsSmallDisplay: Column[] = ['public', 'num_users', 'permission', 'date_last_modified'];
+const hideColsSmallDisplay: Column[] = ['public', 'num_users', 'owner', 'permission', 'date_last_modified'];
 
 export interface ILibraryListTableSort {
   col: IADSApiLibraryParams['sort'];