style: fix footer info block style

cheminfo · Feb 26, 2025 · 6480caf · 6480caf
1 parent 25aad7f
commit 6480caf
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 17 deletions.
diff --git a/src/component/1d/FooterBanner.tsx b/src/component/1d/FooterBanner.tsx
@@ -20,11 +20,15 @@ import { useInsetOptions } from './inset/InsetProvider.js';
 const FlexInfoItem = styled(InfoItem)`
   align-items: center;
 `;
+const InfoBlock = styled(InfoItem)`
+  white-space: nowrap;
+`;
+
 const Separator = styled.div`
   border-left: 2px solid gray;
-  margin: 0 20px;
+  margin: 0 10px;
   width: 1px;
-  height: 100%;
+  height: 10px;
 `;
 
 interface FooterBannerInnerProps {
@@ -92,7 +96,7 @@ function FooterBannerInner({
   return (
     <FooterContainer>
       <BsCursor />
-      <div>
+      <InfoBlock>
         <InfoItem.Label> 𝛅: </InfoItem.Label>
         <InfoItem.Value>{format(scaleX().invert(position.x))}</InfoItem.Value>
         <InfoItem.Unit>ppm</InfoItem.Unit>
@@ -114,10 +118,10 @@ function FooterBannerInner({
             </InfoItem>
           </>
         )}
-      </div>
+      </InfoBlock>
 
       {isBrushing && (
-        <FlexInfoItem autoHide>
+        <FlexInfoItem autoHide display="flex">
           <InfoItem.Label> Δppm: </InfoItem.Label>
           <InfoItem.Value>
             {(scaleX().invert(startX) - scaleX().invert(endX)).toPrecision(6)}
@@ -126,20 +130,20 @@ function FooterBannerInner({
       )}
 
       {activeSpectrum && (
-        <FlexInfoItem autoHide>
+        <FlexInfoItem autoHide display="flex" hideThreshold={750}>
           {spectrum?.info?.originFrequency && isBrushing && (
-            <div>
+            <InfoBlock>
               <InfoItem.Label> ΔHz: </InfoItem.Label>
               <InfoItem.Value>
                 {(
                   (scaleX().invert(startX) - scaleX().invert(endX)) *
                   spectrum?.info?.originFrequency
                 ).toPrecision(5)}
               </InfoItem.Value>
-            </div>
+            </InfoBlock>
           )}
           {isBrushing && (
-            <div>
+            <InfoBlock>
               <InfoItem.Label> ratio :</InfoItem.Label>
               <InfoItem.Value>
                 {(
@@ -148,21 +152,21 @@ function FooterBannerInner({
                 ).toFixed(2)}
                 %
               </InfoItem.Value>
-            </div>
+            </InfoBlock>
           )}
         </FlexInfoItem>
       )}
 
       {activeSpectrum && (
-        <FlexInfoItem>
+        <FlexInfoItem display="flex" autoHide hideThreshold={550}>
           <Separator />
           <IoPulseSharp />
-          <div>
+          <InfoBlock>
             <InfoItem.Label>Intensity: </InfoItem.Label>
             <InfoItem.Value style={{ minWidth: 80 }}>
               {format(getYValue(position.x))}
             </InfoItem.Value>
-          </div>
+          </InfoBlock>
         </FlexInfoItem>
       )}
     </FooterContainer>

diff --git a/src/component/elements/Footer.tsx b/src/component/elements/Footer.tsx
@@ -16,28 +16,44 @@ const FooterContainer = styled.div`
 `;
 
 interface InfoContainerProps {
+  /** Whether to auto-hide the element based on threshold (default: `false`) */
   autoHide?: boolean;
+  /** Hide threshold in pixel (default: `600`) */
+  hideThreshold?: number;
+  /** The  display property (default: `'inline-block'`) */
   display?: CSSProperties['display'];
 }
 
 const InfoContainer = styled.div<InfoContainerProps>`
   margin: 0 10px;
   display: ${({ display = 'inline-block' }) => display};
 
-  @container (max-width:600px) {
+  @container (max-width:${({ hideThreshold = 600 }) => hideThreshold}px) {
     display: ${({ autoHide = false, display = 'inline-block' }) =>
-      autoHide ? 'none' : display} !important;
+      autoHide ? 'none' : display};
   }
 `;
 
 interface InfoItemProps extends InfoContainerProps {
   children: ReactNode;
+  className?: string;
 }
 
 function InfoItem(props: InfoItemProps) {
-  const { children, autoHide = false, display = 'inline-block' } = props;
+  const {
+    children,
+    autoHide = false,
+    display = 'inline-block',
+    className,
+    hideThreshold,
+  } = props;
   return (
-    <InfoContainer autoHide={autoHide} display={display}>
+    <InfoContainer
+      autoHide={autoHide}
+      display={display}
+      className={className}
+      hideThreshold={hideThreshold}
+    >
       {children}
     </InfoContainer>
   );
@@ -54,6 +70,7 @@ InfoItem.Label = styled(Span)`
 
 InfoItem.Value = styled(Span)`
   font-size: 14px;
+  display: inline-block;
 `;
 
 InfoItem.Unit = styled(Span)`