|
|
@@ -82,7 +82,16 @@ const GithubTrendingScene: React.FC<GithubTrendingSceneProps> = ({
|
|
|
}
|
|
|
|
|
|
const colGap = isPortrait ? 0 : 40;
|
|
|
- const leftColWidth = isPortrait ? 0 : Math.round(contentWidth * 0.4);
|
|
|
+ // Landscape left column: cap width so both images stacked (each at its
|
|
|
+ // natural aspect ratio) fit within contentHeight. Assumes typical aspects
|
|
|
+ // (social preview 2:1, star history ~1.5:1 → combined height factor 7/6).
|
|
|
+ // Falls back to 40% of contentWidth when that is smaller.
|
|
|
+ const leftColWidth = isPortrait
|
|
|
+ ? 0
|
|
|
+ : Math.min(
|
|
|
+ Math.round(contentWidth * 0.4),
|
|
|
+ Math.round((contentHeight - 20) / (7 / 6)),
|
|
|
+ );
|
|
|
const rightColWidth = isPortrait ? contentWidth : contentWidth - leftColWidth - colGap;
|
|
|
|
|
|
return (
|
|
|
@@ -207,18 +216,19 @@ const ColorDot: React.FC<{ color: string }> = ({ color }) => (
|
|
|
}} />
|
|
|
);
|
|
|
|
|
|
-const ImageFrame: React.FC<{ children: React.ReactNode; minHeight?: number; flex?: number }> = ({ children, minHeight = 0, flex }) => (
|
|
|
+const ImageFrame: React.FC<{ children: React.ReactNode; flex?: string | number }> = ({ children, flex }) => (
|
|
|
<div style={{
|
|
|
- flex: flex ?? 1,
|
|
|
- minHeight,
|
|
|
- background: "rgba(255,255,255,0.04)",
|
|
|
+ flex,
|
|
|
+ width: flex ? undefined : "100%",
|
|
|
+ height: "auto",
|
|
|
+ background: "#0b1220",
|
|
|
border: "1px solid rgba(255,255,255,0.10)",
|
|
|
- borderRadius: 12,
|
|
|
+ borderRadius: 16,
|
|
|
overflow: "hidden",
|
|
|
display: "flex",
|
|
|
alignItems: "center",
|
|
|
justifyContent: "center",
|
|
|
- padding: 12,
|
|
|
+ boxShadow: "0 12px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35)",
|
|
|
}}>
|
|
|
{children}
|
|
|
</div>
|
|
|
@@ -304,7 +314,9 @@ const LandscapeContent: React.FC<ContentProps> = ({
|
|
|
display: "flex",
|
|
|
gap: colGap,
|
|
|
}}>
|
|
|
- {/* Left column: images stacked (hidden entirely when neither is present) */}
|
|
|
+ {/* Left column: images stacked with natural heights (same width,
|
|
|
+ heights determined by each image's aspect ratio). Hidden entirely
|
|
|
+ when neither is present. */}
|
|
|
{hasAnyImage && (
|
|
|
<div style={{
|
|
|
width: leftColWidth,
|
|
|
@@ -312,15 +324,16 @@ const LandscapeContent: React.FC<ContentProps> = ({
|
|
|
display: "flex",
|
|
|
flexDirection: "column",
|
|
|
gap: 20,
|
|
|
+ overflow: "hidden",
|
|
|
}}>
|
|
|
{socialPreview && (
|
|
|
- <ImageFrame flex={1}>
|
|
|
- <Img src={staticFile(socialPreview.filename)} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
|
|
|
+ <ImageFrame>
|
|
|
+ <Img src={staticFile(socialPreview.filename)} style={{ display: "block", width: "100%", height: "auto" }} />
|
|
|
</ImageFrame>
|
|
|
)}
|
|
|
{starHistory && (
|
|
|
- <ImageFrame flex={1}>
|
|
|
- <Img src={staticFile(starHistory.filename)} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
|
|
|
+ <ImageFrame>
|
|
|
+ <Img src={staticFile(starHistory.filename)} style={{ display: "block", width: "100%", height: "auto" }} />
|
|
|
</ImageFrame>
|
|
|
)}
|
|
|
</div>
|
|
|
@@ -358,21 +371,22 @@ const PortraitContent: React.FC<ContentProps> = ({
|
|
|
flexDirection: "column",
|
|
|
gap: 20,
|
|
|
}}>
|
|
|
- {/* Top row: images side-by-side (or single full-width; hidden when neither) */}
|
|
|
+ {/* Top row: images side-by-side, each flex:1 (same width) with natural
|
|
|
+ height. Row sizes to tallest child; shorter child top-aligned. */}
|
|
|
{hasAnyImage && (
|
|
|
<div style={{
|
|
|
- height: Math.round(contentHeight * 0.42),
|
|
|
display: "flex",
|
|
|
gap: 20,
|
|
|
+ alignItems: "flex-start",
|
|
|
}}>
|
|
|
{socialPreview && (
|
|
|
<ImageFrame flex={1}>
|
|
|
- <Img src={staticFile(socialPreview.filename)} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
|
|
|
+ <Img src={staticFile(socialPreview.filename)} style={{ display: "block", width: "100%", height: "auto" }} />
|
|
|
</ImageFrame>
|
|
|
)}
|
|
|
{starHistory && (
|
|
|
<ImageFrame flex={1}>
|
|
|
- <Img src={staticFile(starHistory.filename)} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
|
|
|
+ <Img src={staticFile(starHistory.filename)} style={{ display: "block", width: "100%", height: "auto" }} />
|
|
|
</ImageFrame>
|
|
|
)}
|
|
|
</div>
|