chore: width style changes & removed double import

Author: michaelwenk

pkg/database/postgres.go

@@ -12,7 +12,6 @@ import (
 	"github.com/Code-Hex/dd"
 	"github.com/MassBank/MassBank3/pkg/massbank"
 	"github.com/lib/pq"
-	_ "github.com/lib/pq"
 )
 
 type Index struct {

web-frontend/src/elements/record/Resizable.tsx

@@ -17,7 +17,7 @@ import getLinkedAnnotations from '../../utils/getLinkedAnnotations';
 import LinkedPeakAnnotation from '../../types/peak/LinkedPeakAnnotation';
 
 const sidebarWidth = 10;
-const defaultChartWidthRatio = 0.7;
+const defaultChartWidthRatio = 0.75;
 
 type InputProps = {
   record: Record;

web-frontend/src/elements/routes/pages/search/SpectralHitsViewComponent.tsx

@@ -20,8 +20,11 @@ function SpectralHitsViewComponent({
   width,
   height,
 }: InputProps) {
-  const spectralHitsViewComponent = useMemo(
-    () => (
+  const spectralHitsViewComponent = useMemo(() => {
+    const widthResultInfo = width * 0.25;
+    const widthResizable = width - widthResultInfo;
+
+    return (
       <div
         className="component-container"
         style={{
@@ -31,20 +34,23 @@ function SpectralHitsViewComponent({
       >
         <ResultInfo
           hit={hit}
-          imageWidth={width * 0.3}
+          imageWidth={widthResultInfo}
           imageHeight={height}
-          style={{ width: width * 0.3, height, backgroundColor: 'lightyellow' }}
+          style={{
+            width: widthResultInfo,
+            height,
+            backgroundColor: 'lightyellow',
+          }}
         />
         <Resizable
           record={{ peak: { peak: { values: reference } } } as Record}
           record2={hit.record}
-          width={width * 0.7}
+          width={widthResizable}
           height={height}
         />
       </div>
-    ),
-    [height, hit, reference, width],
-  );
+    );
+  }, [height, hit, reference, width]);
 
   return spectralHitsViewComponent;
 }