Skip to content

Drop loading placeholder weird sizing #1941

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simo6529 merged 2 commits into from
Feb 17, 2026
Merged

Drop loading placeholder weird sizing #1941

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4791c5
wip
simo6529 Feb 17, 2026
fb33817
Merge branch 'main' into drop-loading-placeholder-weird-sizing
simo6529 Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 34 additions & 21 deletions components/drops/view/part/DropPartMarkdownImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,43 +81,47 @@ const DropPartMarkdownImage: React.FC<DropPartMarkdownImageProps> = ({

const modalContent = (
<div
className="tailwind-scope tw-cursor-default tw-relative tw-z-1000"
className="tailwind-scope tw-relative tw-z-1000 tw-cursor-default"
onClick={handleCloseModal}
onTouchStart={(e) => e.stopPropagation()}
onTouchEnd={(e) => e.stopPropagation()}
onTouchMove={(e) => e.stopPropagation()}>
<div className="tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-80 tw-pointer-events-none"></div>
onTouchMove={(e) => e.stopPropagation()}
>
<div className="tw-pointer-events-none tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-80"></div>
<TransformWrapper
panning={{ disabled: true }}
limitToBounds={!isZoomed}
smooth
onZoom={(e) => setIsZoomed(e.state.scale > 1)}>
onZoom={(e) => setIsZoomed(e.state.scale > 1)}
>
{({ resetTransform }) => (
<div className="tw-fixed tw-inset-0 tw-z-1000 tw-overflow-hidden tw-flex tw-items-center tw-justify-center">
<div className="tw-relative tw-flex tw-flex-col lg:tw-flex-row tw-max-w-[95vw] tw-max-h-[90vh]">
<div className="tw-fixed tw-inset-0 tw-z-1000 tw-flex tw-items-center tw-justify-center tw-overflow-hidden">
<div className="tw-relative tw-flex tw-max-h-[90vh] tw-max-w-[95vw] tw-flex-col lg:tw-flex-row">
<div
role="button"
className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-flex-1 tw-min-h-0 tw-min-w-0"
className="tw-flex tw-min-h-0 tw-min-w-0 tw-flex-1 tw-flex-col tw-items-center tw-justify-center"
onClick={(e) => e.stopPropagation()}
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.stopPropagation();
}
}}>
}}
>
<TransformComponent
wrapperClass="tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center"
contentClass="tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center">
contentClass="tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center"
>
<img
src={resolvedSrc}
alt={alt}
style={{ pointerEvents: "auto" }}
className="tw-max-h-[75vh] lg:tw-max-h-[90vh] tw-max-w-full tw-object-contain"
className="tw-max-h-[75vh] tw-max-w-full tw-object-contain lg:tw-max-h-[90vh]"
/>
</TransformComponent>
</div>

<div className="tw-fixed tw-top-2 tw-right-4 tw-flex tw-flex-row tw-gap-x-4 tw-z-[1001] tw-pt-[env(safe-area-inset-top,0px)] lg:tw-relative lg:tw-top-0 lg:tw-right-auto lg:tw-flex-col-reverse lg:tw-gap-x-0 lg:tw-gap-y-2 lg:tw-ml-4 lg:tw-pt-0 lg:tw-self-start">
<div className="tw-fixed tw-right-4 tw-top-2 tw-z-[1001] tw-flex tw-flex-row tw-gap-x-4 tw-pt-[env(safe-area-inset-top,0px)] lg:tw-relative lg:tw-right-auto lg:tw-top-0 lg:tw-ml-4 lg:tw-flex-col-reverse lg:tw-gap-x-0 lg:tw-gap-y-2 lg:tw-self-start lg:tw-pt-0">
{isZoomed && (
<button
onClick={(e) => {
Expand All @@ -127,19 +131,25 @@ const DropPartMarkdownImage: React.FC<DropPartMarkdownImageProps> = ({
}}
data-tooltip-id="reset-zoom-markdown"
className={modalButtonClasses}
aria-label="Reset">
aria-label="Reset"
>
<FontAwesomeIcon
icon={faRotateLeft}
className="tw-size-4"
/>
</button>
)}
<Link href={resolvedSrc} target="_blank" rel="noopener noreferrer">
<Link
href={resolvedSrc}
target="_blank"
rel="noopener noreferrer"
>
<button
onClick={(e) => e.stopPropagation()}
data-tooltip-id={openBrowserTooltipId}
className={modalButtonClasses}
aria-label="Open image in new tab">
aria-label="Open image in new tab"
>
<ArrowTopRightOnSquareIcon className="tw-h-5 tw-w-5 tw-flex-shrink-0" />
</button>
</Link>
Expand All @@ -148,22 +158,25 @@ const DropPartMarkdownImage: React.FC<DropPartMarkdownImageProps> = ({
onClick={handleFullScreen}
data-tooltip-id="full-screen-markdown"
className={modalButtonClasses}
aria-label="Full screen">
aria-label="Full screen"
>
<FontAwesomeIcon icon={faExpand} className="tw-size-4" />
</button>
)}
<button
onClick={handleCloseModal}
data-tooltip-id="close-modal-markdown"
className={modalButtonClasses}
aria-label="Close modal">
aria-label="Close modal"
>
<svg
className="tw-h-5 tw-w-5 tw-flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
Expand Down Expand Up @@ -203,17 +216,17 @@ const DropPartMarkdownImage: React.FC<DropPartMarkdownImageProps> = ({

return (
<>
<div className="tw-flex tw-mt-2">
{isLoading && (
<div className="tw-absolute tw-inset-0 tw-bg-iron-800 tw-animate-pulse tw-rounded-xl tw-h-64"></div>
<div className="tw-relative tw-mt-2 tw-flex">
{isLoading && (
<div className="tw-pointer-events-none tw-absolute tw-inset-0 tw-animate-pulse tw-rounded-xl tw-bg-iron-800"></div>
)}
<img
ref={imgRef}
src={scaledSrc}
alt={alt}
onLoad={handleImageLoad}
onClick={handleImageClick}
className={`tw-object-center tw-object-contain tw-max-w-full tw-h-64 tw-cursor-pointer ${
className={`tw-h-64 tw-max-w-full tw-cursor-pointer tw-object-contain tw-object-center ${
isLoading ? "tw-opacity-0" : "tw-opacity-100"
}`}
{...props}
Expand Down