fix html repr indexes section (#9768)

Author: benbovy

xarray/core/formatting_html.py

@@ -155,7 +155,9 @@ def summarize_index(coord_names, index) -> str:
     return (
         f"<div class='xr-index-name'><div>{name}</div></div>"
         f"<div class='xr-index-preview'>{preview}</div>"
-        f"<div></div>"
+        # need empty input + label here to conform to the fixed CSS grid layout
+        f"<input type='checkbox' disabled/>"
+        f"<label></label>"
         f"<input id='{index_id}' class='xr-index-data-in' type='checkbox'/>"
         f"<label for='{index_id}' title='Show/Hide index repr'>{data_icon}</label>"
         f"<div class='xr-index-data'>{details}</div>"

xarray/static/css/style.css

@@ -75,6 +75,7 @@ body.vscode-dark {
 .xr-section-item input {
   display: inline-block;
   opacity: 0;
+  height: 0;
 }
 
 .xr-section-item input + label {