Minor followups

src/components/AllSkyMap.tsx

@@ -32,6 +32,7 @@ interface AllSkyMapProps {
   title?: string;
   subtitle?: string;
   height?: number;
+  width?: number;
 }
 
 /**
@@ -50,6 +51,7 @@ export default function AllSkyMap({
   title = 'Sources by position',
   subtitle = "Click a source's marker to view its light curve",
   height = 500,
+  width = 375,
 }: AllSkyMapProps) {
   const containerRef = useRef<PlotlyHTMLElement>(null);
   const navigate = useNavigate();
@@ -113,6 +115,7 @@ export default function AllSkyMap({
 
     const layout: Partial<Layout> = {
       height,
+      width,
       margin: { t: title ? 48 : 24, b: 8, l: 8, r: 8 },
       paper_bgcolor: 'transparent',
       plot_bgcolor: 'transparent',
@@ -172,11 +175,7 @@ export default function AllSkyMap({
 
     void el.on('plotly_afterplot', () => setIsDataReady(true));
 
-    const resizeObserver = new ResizeObserver(() => Plotly.Plots.resize(el));
-    resizeObserver.observe(el);
-
     return () => {
-      resizeObserver.disconnect();
       Plotly.purge(el);
     };
   }, [
@@ -195,12 +194,10 @@ export default function AllSkyMap({
   ]);
 
   return (
-    <div style={{ position: 'relative' }}>
-      <div style={{ position: 'absolute' }}>
-        <p style={{ fontWeight: 'bold', margin: 0, marginLeft: 10 }}>{title}</p>
-        <p style={{ fontSize: 13, color: '#888', margin: 0, marginLeft: 10 }}>
-          {subtitle}
-        </p>
+    <div className="all-sky-wrapper">
+      <div className="title-container">
+        <p className="title-text">{title}</p>
+        <p className="subtitle-text">{subtitle}</p>
       </div>
       <div
         // @ts-expect-error plotlyRef is an extended version of an HTMLDivElement

src/components/Lightcurve.tsx

@@ -254,8 +254,7 @@ export function Lightcurve({
   const plotLayoutConfig = useMemo(
     () =>
       ({
-        width: plotLayout.width,
-        height: plotLayout.height,
+        autosize: true,
         yaxis: {
           title: {
             text: 'Flux Density (Jy)',
@@ -473,19 +472,9 @@ export function Lightcurve({
   return (
     <div className="lightcurve-container">
       {(title || subtitle) && (
-        <div style={{ position: 'absolute', zIndex: 1 }}>
-          {title && (
-            <p style={{ fontWeight: 'bold', margin: 0, marginLeft: 10 }}>
-              {title}
-            </p>
-          )}
-          {subtitle && (
-            <p
-              style={{ fontSize: 13, color: '#888', margin: 0, marginLeft: 10 }}
-            >
-              {subtitle}
-            </p>
-          )}
+        <div className="title-container">
+          {title && <p className="title-text">{title}</p>}
+          {subtitle && <p className="subtitle-text">{subtitle}</p>}
         </div>
       )}
       {hideFlaggedObsToggle !== true && (

src/components/LightcurveDataTable.tsx

@@ -56,12 +56,13 @@ export function LightcurveDataTable({
       {
         header: 'ID',
         accessorFn: (row) => row.id,
-        size: 325,
+        size: 310,
       },
       {
         header: 'Time',
         accessorKey: 'time',
         accessorFn: (row) => row.time,
+        size: 160,
         sortingFn: (rowA, rowB) =>
           rowA.original.timeParsed - rowB.original.timeParsed,
       },
@@ -103,7 +104,7 @@ export function LightcurveDataTable({
         },
         sortingFn: (rowA, rowB) =>
           rowA.original.flux_err - rowB.original.flux_err,
-        size: 100,
+        size: 120,
       },
       {
         header: 'Flags',

src/components/Main.tsx

@@ -63,10 +63,11 @@ export function Main() {
               name: s.name,
               sourceId: s.source_id,
             }))}
+            width={DEFAULT_HOMEPAGE_PLOT_LAYOUT.width}
           />
         </div>
       ) : (
-        <div className="home-lightcurve-placeholder"></div>
+        <div className="sources-plot-placeholder"></div>
       )}
       {initialLoadData?.lightcurveData ? (
         <div className="home-light-curve">

src/components/Table.tsx

@@ -77,7 +77,9 @@ export function Table<T>({
                       style={
                         sortable
                           ? {
-                              position: 'relative',
+                              display: 'flex',
+                              justifyContent: 'center',
+                              alignItems: 'center',
                               cursor: header.column.getCanSort()
                                 ? 'pointer'
                                 : 'cursor',
@@ -90,18 +92,13 @@ export function Table<T>({
                           : undefined
                       }
                     >
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                      <span
-                        style={{
-                          position: 'absolute',
-                          right: -5,
-                          top: -6,
-                          fontSize: '0.9em',
-                        }}
-                      >
+                      <span>
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                      </span>
+                      <span className="sort-icon">
                         {{
                           asc: '▲',
                           desc: '▼',

src/components/styles/lightcurve.css

@@ -75,12 +75,15 @@
   border-radius: 10px;
   border: 1px solid #c4c8cb;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-  width: fit-content;
-  min-width: 1280px;
   padding: 3px;
   background-color: white;
   margin-bottom: 1.25em;
   height: 500px;
+  width: 1280px;
+}
+
+.source-lightcurve-container {
+  height: fit-content;
 }
 
 .lightcurve-container {

src/components/styles/search-form.css

@@ -21,16 +21,18 @@ form {
 
 .search-form {
   display: flex;
-  font-size: 0.75em;
+  font-size: 0.7em;
   gap: 0.5em;
   align-items: center;
   background-color: rgb(248, 249, 250);
+  line-height: 1;
 }
 
 .search-form > label {
   display: flex;
   flex-direction: column;
   font-weight: bold;
+  gap: 2px;
 }
 
 .search-form > label > span > span {

src/components/styles/source-page.css

@@ -50,17 +50,25 @@
   padding: 3px;
 }
 
-.source-grid-container {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: auto 400px;
-  gap: 2em;
-  max-width: 1288px;
-  border-radius: 10px;
+.source-grid-container,
+.data-access-container {
   border: 1px solid #c4c8cb;
+  border-radius: 10px;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   padding: 1em;
   background-color: #fff;
+  width: 1280px;
+}
+
+.source-grid-container {
+  display: grid;
+  grid-template-columns: auto 400px;
+  gap: 2em;
+}
+
+.data-access-container {
+  margin-top: 1.25em;
+  overflow-x: auto;
 }
 
 .source-section-h3 {
@@ -82,18 +90,6 @@
   height: 20px;
 }
 
-.data-access-container {
-  box-sizing: border-box;
-  border: 1px solid #c4c8cb;
-  border-radius: 10px;
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-  padding: 1em;
-  background-color: #fff;
-  margin-top: 1.25em;
-  max-width: 1288px;
-  min-width: fit-content;
-}
-
 .download-data-container > h3 {
   margin-bottom: 0.5em;
 }

src/components/styles/table.css

@@ -64,3 +64,7 @@ tbody > tr:nth-of-type(even) {
 .pagination-details > span {
   font-weight: bold;
 }
+
+.sort-icon {
+  font-size: 0.9em;
+}

src/index.css

@@ -9,8 +9,13 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 html,
 body {
+  min-width: 1280px;
   min-height: 100%;
   margin: 0;
   padding: 0;
@@ -37,14 +42,25 @@ main {
   border-radius: 10px;
   border: 1px solid #c4c8cb;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-  width: fit-content;
-  min-width: 960px;
+  width: 960px;
   padding: 3px;
   background-color: white;
   margin-bottom: 1.25em;
+}
+
+.home-lightcurve-placeholder {
   height: 375px;
 }
 
+.sources-plot-placeholder {
+  height: 500px;
+}
+
+.sources-plot-container,
+.home-light-curve {
+  height: fit-content;
+}
+
 .home-light-curve {
   position: relative;
 }
@@ -90,14 +106,6 @@ main {
   align-self: flex-start;
 }
 
-.sources-plot-container {
-  height: fit-content;
-}
-
-.sources-plot-placeholder {
-  height: 450px;
-}
-
 .nav-container,
 footer {
   display: flex;
@@ -118,3 +126,27 @@ footer {
   margin-top: 0;
   font-size: 1.1em;
 }
+
+.title-container {
+  position: absolute;
+  z-index: 1;
+}
+
+.title-text,
+.subtitle-text {
+  margin: 0;
+  margin-left: 10px;
+}
+
+.title-text {
+  font-weight: bold;
+}
+
+.subtitle-text {
+  font-size: 13px;
+  color: #888;
+}
+
+.all-sky-wrapper {
+  position: relative;
+}