@hanzo/ui 3.8.15 → 3.8.17

package/blocks/components/screenful-block/content.tsx

@@ -91,7 +91,7 @@ const Content: React.FC<{
 }) => {
 
   // We need to set h-full when we have more than 1 column too, so the grid takes full height - Firefox and Safari fix.
-  const layoutClx = 'flex flex-col gap-2 sm:gap-4 h-full pt-11 lg:pt-20 ' + ((agent !== 'phone') ? ('md:grid md:gap-8 ' + `md:grid-cols-${b.contentColumns.length} `) : '')
+  const layoutClx = 'flex flex-col gap-2 sm:gap-4 h-full ' + ((agent !== 'phone') ? ('md:grid md:gap-8 ' + `md:grid-cols-${b.contentColumns.length} `) : '')
 
   const orderclx = (columnIndex: number): string => {
     const orderIndex = b.mobileOrder?.indexOf(columnIndex)

package/blocks/components/screenful-block/index.tsx

@@ -14,15 +14,17 @@ const ScreenfulComponent: React.FC<{
   agent?: string
   initialInView?: boolean
   snapTile?: boolean
-  className?: string
+  clx?: string
   contentClx?: string
+  bottom?: React.ReactNode
 }> = ({
   block,
   agent,
   initialInView=false,
   snapTile=false,
-  className='',
-  contentClx=''
+  clx='',
+  contentClx='',
+  bottom
 }) => {
 
   if (block.blockType !== 'screenful') {
@@ -38,8 +40,8 @@ const ScreenfulComponent: React.FC<{
   const narrowGutters = specified('narrow-gutters') // eg, for a table object that is large
   const noGutters = specified('no-gutters')
   const fullScreenWidth = specified('full-screen-width')
-  const fullScreenHeight = specified('full-screen-height')
-  const vertCenter = specified('vert-center')
+  const vertCenter = specified('vert-center') // at the main level, it seems only useful w one column
+  const oneColumn = b.contentColumns.length === 1
 
     // content wrapper clx:
     // [
@@ -48,26 +50,32 @@ const ScreenfulComponent: React.FC<{
     //    p&m-modifiers
     // ]
   const cwclx = [
-    'xl:mx-auto overflow-y-hidden ',
+    'xl:mx-auto overflow-y-hidden h-full',
     fullScreenWidth ? '' : 'max-w-screen-xl',
-    fullScreenHeight ? 'h-full' : '',
       // desktop header: 80px / pt-20
       // mobile header: 44px / pt-11  
     narrowGutters ? 
-      'px-6 lg:px-8 2xl:px-2 pb-6 ' + (snapTile  ? 'pt-15 md:pt-26 lg:pt-28 ' : '') // otherwise assume there is a Main
-    : noGutters ? 
-      'px-0 pb-0 ' + (snapTile  ? 'pt-11 lg:pt-20 ' : '') // otherwise assume there is a Main
+      'px-6 lg:px-8 2xl:px-2 pb-4 lg:pb-6 xl:pb-8 ' + (snapTile  ? 'pt-15 md:pt-26 lg:pt-28 ' : '') // otherwise assume there is a Main
       : 
-      'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)] ',
+      noGutters ? 
+        'px-0 pb-0 ' + (snapTile  ? 'pt-11 lg:pt-20 ' : '') // otherwise assume there is a Main
+        : 
+        'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)] ',
 
     (agent && agent !== 'desktop') ? 'pt-15 sm:pt-17 pb-0 px-3 sm:px-8' : '' 
   ]
 
-  const spreadId = (b.anchorId) ? {id: b.anchorId} : {}
-
   return (
-    <section {...spreadId} className={cn((snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen'), className)}>
-      <ApplyTypography className={cn('w-full flex flex-row justify-center self-stretch', snapTile ? tileHeight : '')} >
+    <section {...((b.anchorId) ? {id: b.anchorId} : {})} className={cn(
+      snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen', 
+      bottom ? 'flex flex-col' : '',
+      clx
+    )}>
+      <ApplyTypography className={cn(
+        'w-full flex flex-row justify-center self-stretch', 
+        snapTile ? tileHeight : '',
+        bottom ? 'grow' : ''
+      )}>
         <Poster banner={b.banner}>
         {hasBannerVideo() && (
           <Video 
@@ -80,7 +88,7 @@ const ScreenfulComponent: React.FC<{
             ...cwclx,
             snapTile ? 'absolute left-0 right-0 top-0 bottom-0 ' : 'flex min-h-screen w-full',
             contentClx,
-            vertCenter ? '!py-0 self-center' : ''
+            vertCenter ? 'self-center ' + (oneColumn ? '!py-0' : '' ) : ''
           )}
         >
           <Content block={b} agent={agent}  className='w-full'/>
@@ -88,6 +96,7 @@ const ScreenfulComponent: React.FC<{
         </div>
       </Poster>
       </ApplyTypography>
+      {bottom}
     </section>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.8.15",
+  "version": "3.8.17",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/primitives/popover.tsx

@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-modal w-72 rounded-md border bg-level-1 p-4 text-foreground shadow-md outline-none ' + 
+        'z-above-modal-2 w-72 rounded-md border bg-level-1 p-4 text-foreground shadow-md outline-none ' + 
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' + 
         'data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ' + 
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 ' +