Add bg to right buttons

packages/geoview-core/src/core/components/common/index.ts

@@ -1,7 +1,6 @@
 export * from './focus-trap-element';
 export * from './responsive-grid';
 export * from './layer-list';
-export * from './layer-title';
 export * from './layout';
 export * from './use-footer-panel-height';
 export * from './use-lightbox';

packages/geoview-core/src/core/components/common/layout.tsx

@@ -1,8 +1,9 @@
 import { useCallback, ReactNode, useRef, useMemo } from 'react';
+import { useTheme } from '@mui/material/styles';
 import { logger } from '@/core/utils/logger';
 import { LayerList, LayerListEntry } from './layer-list';
 import { ResponsiveGridLayout, ResponsiveGridLayoutExposedMethods } from './responsive-grid-layout';
-import { LayerTitle } from './layer-title';
+import { Tooltip, Typography } from '@/ui';
 
 interface LayoutProps {
   children?: ReactNode;
@@ -26,6 +27,7 @@
   onGuideIsOpen,
 }: LayoutProps): JSX.Element {
   const responsiveLayoutRef = useRef<ResponsiveGridLayoutExposedMethods>(null);
+  const theme = useTheme();
 
   /**
    * Handles clicks to layers in left panel. Sets selected layer.
@@ -65,12 +67,28 @@
    * @returns JSX.Element
    */
   const renderLayerTitle = useCallback((): JSX.Element => {
+    // clamping code copied from https://tailwindcss.com/docs/line-clamp
+    const sxClasses = {
+      fontSize: theme.palette.geoViewFontSize.lg,
+      textAlign: fullWidth ? 'center' : 'left',
+      width: fullWidth ? '100%' : 'auto',
+      fontWeight: '600',
+      marginTop: '12px',
+      overflow: 'hidden',
+      display: '-webkit-box',
+      '-webkit-box-orient': 'vertical',
+      '-webkit-line-clamp': '2',
+      ...(!fullWidth && { [theme.breakpoints.up('md')]: { display: 'none' } }),
+    };
+
     return (
-      <LayerTitle hideTitle fullWidth={fullWidth}>
-        {memoLayerTitle}
-      </LayerTitle>
+      <Tooltip title={memoLayerTitle} placement="top" arrow>
+        <Typography sx={sxClasses} component="div">
+          {memoLayerTitle}
+        </Typography>
+      </Tooltip>
     );
   }, [fullWidth, memoLayerTitle]);
 
   return (
     <ResponsiveGridLayout

packages/geoview-core/src/core/components/common/responsive-grid-layout-style.ts

@@ -3,6 +3,17 @@ import { Theme } from '@mui/material/styles';
 // ? I doubt we want to define an explicit type for style properties?
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getSxClasses = (theme: Theme): any => ({
+  rightButtonsContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '0.6rem',
+    backgroundColor: theme.palette.geoViewColor.primary.lighten(0.5, 0.4),
+    borderTopLeftRadius: '1.8rem',
+    borderTopRightRadius: '0.5rem',
+    padding: ' 0.5rem 0.5rem 0.5rem 2rem',
+    borderTop: `0.2rem solid ${theme.palette.geoViewColor.primary.lighten(0.2, 0.4)}`,
+    borderLeft: `0.2rem solid ${theme.palette.geoViewColor.primary.lighten(0.2, 0.4)}`,
+  },
   rightGridContent: {
     border: `2px solid ${theme.palette.geoViewColor.primary.main}`,
     borderRadius: '5px',

packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx

@@ -126,7 +126,7 @@ const ResponsiveGridLayout = forwardRef(
           variant="contained"
           className="style2"
           startIcon={isEnlarged ? <ArrowForwardIcon /> : <ArrowBackIcon />}
-          sx={{ height: '40px', borderRadius: '1.5rem', [theme.breakpoints.down('md')]: { display: 'none' } }}
+          sx={{ height: '40px', borderRadius: '1.5rem', boxShadow: 'none', [theme.breakpoints.down('md')]: { display: 'none' } }}
           onClick={() => handleIsEnlarge(!isEnlarged)}
           tooltip={isEnlarged ? t('dataTable.reduceBtn')! : t('dataTable.enlargeBtn')!}
           tooltipPlacement="top"
@@ -261,7 +261,7 @@ const ResponsiveGridLayout = forwardRef(
 
     return (
       <Box ref={ref}>
-        <ResponsiveGrid.Root sx={{ pt: 8, pb: 8 }} ref={panelTitleRef}>
+        <ResponsiveGrid.Root sx={{ pt: 8, pb: 0 }} ref={panelTitleRef}>
           {!fullWidth && (
             <ResponsiveGrid.Left
               isRightPanelVisible={isRightPanelVisible}
@@ -284,14 +284,16 @@ const ResponsiveGridLayout = forwardRef(
             <Box
               sx={{
                 display: 'flex',
-                alignItems: 'center',
+                alignItems: fullWidth ? 'end' : 'center',
+                flexDirection: fullWidth ? 'column' : 'row',
+                gap: fullWidth ? '10px' : '0',
                 [theme.breakpoints.up('md')]: { justifyContent: fullWidth ? 'space-between' : 'right' },
                 [theme.breakpoints.down('md')]: { justifyContent: 'space-between' },
               }}
             >
               {rightTop ?? <Box />}
 
-              <Box sx={{ display: 'flex', flexDirection: 'row', gap: '0.6rem' }}>
+              <Box sx={sxClasses.rightButtonsContainer}>
                 {!fullWidth && !hideEnlargeBtn && renderEnlargeButton()}
                 {!!guideContentIds?.length && renderGuideButton()}
                 {!isMapFullScreen && renderFullScreenButton()}