don't hardcode padding constanst, add changelog

CHANGELOG.md

@@ -46,11 +46,14 @@ _Breaking developer changes, which may affect downstream projects or sites that
 * Validator: Don't falsely flag certain tags as "should be a closed area" if the tag also allows both area and line geometries in two separate presets (e.g. `highway=elevator` in the "Elevator" and "Inclined Lift" presets)
 * Fix sorting of nearby streets in address field dropdown
 * Fix bug where "outlink" buttons would not be disabled on invalid values of `identifier` fields
+* Fix zooming/panning in KartaView photo layer after resizing the panel ([#8997])
 #### :earth_asia: Localization
 #### :hourglass: Performance
 #### :mortar_board: Walkthrough / Help
 #### :hammer: Development
 
+[#8997]: https://github.com/openstreetmap/iD/issues/8997
+
 
 # 2.26.2
 ##### 2023-Jul-13

modules/services/kartaview.js

@@ -300,7 +300,6 @@ export default {
 
         // Register viewer resize handler
         context.ui().photoviewer.on('resize.kartaview', function(dimensions) {
-            dimensions = dimensions.map(d => d - 10);
             imgZoom
                 .extent([[0, 0], dimensions])
                 .translateExtent([[0, 0], dimensions]);

modules/ui/photoviewer.js

@@ -91,7 +91,7 @@ export function uiPhotoviewer(context) {
                     target.style('height', newHeight + 'px');
                 }
 
-                dispatch.call(eventName, target, utilGetDimensions(target, true));
+                dispatch.call(eventName, target, subtractPadding(utilGetDimensions(target, true), target));
             }
 
             function clamp(num, min, max) {
@@ -150,9 +150,16 @@ export function uiPhotoviewer(context) {
                 .style('width', setPhotoDimensions[0] + 'px')
                 .style('height', setPhotoDimensions[1] + 'px');
 
-            dispatch.call('resize', photoviewer, setPhotoDimensions);
+            dispatch.call('resize', photoviewer, subtractPadding(setPhotoDimensions, photoviewer));
         }
     };
 
+    function subtractPadding(dimensions, selection) {
+        return [
+            dimensions[0] - parseFloat(selection.style('padding-left')) - parseFloat(selection.style('padding-right')),
+            dimensions[1] - parseFloat(selection.style('padding-top')) - parseFloat(selection.style('padding-bottom'))
+        ];
+    }
+
     return utilRebind(photoviewer, dispatch, 'on');
 }