Code review fixes

components/Timeline.module.css

@@ -12,7 +12,6 @@
 
 .timelineSections {
   width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-around;

components/Timeline.tsx

@@ -9,8 +9,6 @@ interface TimelineData {
 
 interface TimelineProps {
   data: TimelineData[];
-  /** Width of the entire timeline, in pixels. */
-  width: number;
   /** Whether the time is transformed to uppercase. */
   isTimeUppercase?: boolean;
   /** Width of the middle timeline line, in pixels */
@@ -30,7 +28,6 @@ interface TimelineProps {
 
 export default function Timeline({
   data,
-  width,
   isTimeUppercase = true,
   lineWidth = 5,
   outerCircleWidth = 30,
@@ -40,17 +37,9 @@ export default function Timeline({
   gap = 50,
   className,
 }: TimelineProps) {
-  const largerMiddleElemeent =
+  const largerMiddleElement =
     outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
-  const requestedWidth =
-    timeWidth + gap + largerMiddleElemeent + gap + textWidth;
-  if (requestedWidth > width) {
-    throw new Error(
-      `<Timeline /> - timeWidth + gap + ${
-        outerCircleWidth > lineWidth ? "outerCircleWidth" : "lineWidth"
-      } + gap + textWidth  (${timeWidth} + ${gap} + ${largerMiddleElemeent} + ${gap} + ${textWidth} = ${requestedWidth}) is larger than width (${width})`
-    );
-  }
+  const width = timeWidth + gap + largerMiddleElement + gap + textWidth;
   if (innerCircleWidth > outerCircleWidth) {
     throw new Error(
       `<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`

pages/playground.tsx

@@ -68,7 +68,7 @@ export default function Home() {
       <h2>
         <code>{"<Timeline />"}</code>
       </h2>
-      <Timeline data={mockTimelineData} width={800} />
+      <Timeline data={mockTimelineData} />
     </div>
   );
 }