Fix DPI scaling with TGUI, TGUI Say, and Tooltips (#20734)

Got tired of the issues here when working on something else.

Ported several PRs from /tg/station to fix DPI scaling issues. This was
not a problem before 516, however 516 now respects Window's DPI setting,
causing misalignment in several of our UI elements.

This PR implements these ~~four~~ ~~five~~ six PRs:
https://github.com/tgstation/tgstation/pull/65686
https://github.com/tgstation/tgstation/pull/89994
https://github.com/tgstation/tgstation/pull/90416
https://github.com/tgstation/tgstation/pull/90418
https://github.com/tgstation/tgstation/pull/90796
https://github.com/cmss13-devs/cmss13/pull/8734

~~Does not include fixes with TGUI-Say. /tg/station refactored TGUI-Say
after their port to React before they fixed DPI scaling, and this would
be pain to deconstruct to port over to Inferno. Since porting to React
is "inevitable", I considered it not worth my time to fix this.~~

Thanks to the assistance of harry, TGUI-Say fixes now included.

code/modules/tooltip/tooltip.html

@@ -65,12 +65,12 @@
 
 		.hisgrace .wrap {border-color: #7C1414;}
 		.hisgrace .content {color: #15D512; border-color: #9D1414; background-color: #861414;}
-	
+
 		/* TG: Themes */
 		/* ScreenUI */
 		.midnight .wrap {border-color: #2B2B33;}
 		.midnight .content {color: #6087A0; border-color: #2B2B33; background-color: #36363C;}
-		
+
 		.plasmafire .wrap {border-color: #21213D;}
 		.plasmafire .content {color: #FFA800 ; border-color: #21213D; background-color:#1D1D36;}
 
@@ -85,7 +85,7 @@
 
 		.clockwork .wrap {border-color: #170800;}
 		.clockwork .content {color: #B18B25; border-color: #000000; background-color: #5F380E;}
-		
+
 
 	</style>
 </head>
@@ -125,7 +125,7 @@
 					tilesShown 		= tooltip.client_view_w
 					realIconSize 	= mapWidth / tilesShown,
 					resizeRatio		= realIconSize / tooltip.tileSize,
-					//Calculate letterboxing offsets	
+					//Calculate letterboxing offsets
 					leftOffset 		= (map.size.x - mapWidth) / 2,
 					topOffset 		= (map.size.y - mapHeight) / 2;
 
@@ -219,6 +219,13 @@
 
 				var docWidth	= $wrap.outerWidth(),
 					docHeight	= $wrap.outerHeight();
+				var pixelRatio = 1;
+				if (window.devicePixelRatio) {
+					pixelRatio = window.devicePixelRatio;
+				}
+
+				var docWidth	= Math.floor($wrap.outerWidth() * pixelRatio),
+					docHeight	= Math.floor($wrap.outerHeight() * pixelRatio);
 
 				if (posY + docHeight > map.size.y) { //Is the bottom edge below the window? Snap it up if so
 					posY = (posY - docHeight) - realIconSize - tooltip.padding;