Hi,

1. Labels cant have 100% proportional size to the product image because in that case, they will become unreadable on small screen devices. If you want labels to take up less space you need to use rectangular labels. To control labels size on mobile devices try to add the following code to the Global Custom CSS area in theme settings and adjust its values to your needs.

@media (max-width: 575px) {  /* screen width where following code is start to work */
	body .labels-rectangular .product-label {
		padding-right: 2px; /* space beetwen right edge and text */
                padding-left: 2px; /* space beetwen left edge and text */
                font-size: 8px; /* font size of lable text */
		line-height: 12px; /* height of text line, can also control general height of the lable  */
		min-width: 30px; /* minimum width of the label. value "auto" will disable this option  */
	}
}

2. We have checked your mobile search on iOS devices and it’s looking normal on it:

Chrome – https://prnt.sc/zCe-BSqogRbf
Safari – https://prnt.sc/pobvaKBQKkn0

Kind Regards