💄 Fix styles for mobile #2701 (#2720)

* 💄 Fix styles for mobile #2701 * Replace in config #2720 * 💄 Fix style #2701 * 💄 Adjust text alignment #2720 * 🐛 Made link title required #2701
equinor · Jan 24, 2025 · b7d9836 · b7d9836
1 parent 431b6fc
commit b7d9836
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/sanityv3/schemas/objects/anchorLinkList/anchorLinkReference.tsx b/sanityv3/schemas/objects/anchorLinkList/anchorLinkReference.tsx
@@ -1,6 +1,7 @@
 import { anchor } from '@equinor/eds-icons'
 import { EdsIcon } from '../../../icons'
 import { AnchorLinkDescription } from '../anchorReferenceField'
+import { Rule } from 'sanity'
 
 export type AnchorLinkReference = {
   _type: 'anchorLinkReference'
@@ -16,6 +17,7 @@ export default {
       name: 'title',
       description: 'Visible title for the anchor link in the list of anchors',
       type: 'string',
+      validation: (Rule: Rule) => Rule.required(),
     },
     {
       name: 'anchorReference',

diff --git a/web/sections/AnchorLinkList/AnchorLinkList.tsx b/web/sections/AnchorLinkList/AnchorLinkList.tsx
@@ -17,7 +17,7 @@ const AnchorLinkList = forwardRef<HTMLElement, AnchorLinkListProps>(function Anc
   const { title, anchorList = [], columns } = data
 
   const getFlow = () => {
-    const commonGridStyling = 'grid auto-fill-fr lg:place-items-start'
+    const commonGridStyling = 'grid lg:place-items-start grid-cols-3'
     switch (columns) {
       case '3':
         return `${commonGridStyling} lg:grid-cols-3`
@@ -29,7 +29,7 @@ const AnchorLinkList = forwardRef<HTMLElement, AnchorLinkListProps>(function Anc
         return `${commonGridStyling} lg:grid-cols-6`
       default:
       case 'flex':
-        return 'grid auto-fill-fr justify-start'
+        return 'grid grid-cols-auto-fill-fr justify-start'
     }
   }
   return (
@@ -49,7 +49,7 @@ const AnchorLinkList = forwardRef<HTMLElement, AnchorLinkListProps>(function Anc
           {anchorList?.map((anchorLink: { id: string; title?: string; anchorReference?: string }) => {
             const anchor = anchorLink?.anchorReference ? `#${anchorLink?.anchorReference}` : ''
             return (
-              <li key={`anchor_link_${anchorLink?.id}`} className="w-full flex justify-center">
+              <li key={`anchor_link_${anchorLink?.id}`} className="w-full flex justify-start">
                 <ButtonLink variant="ghost" href={anchor} className="w-max text-moss-green-100">
                   {anchorLink?.title}
                 </ButtonLink>