xdr inputs and some css tẃeaks

web/index.css

@@ -1,3 +1,6 @@
+*{
+  box-sizing: border-box;
+}
 body{
     font-family: Arial, Helvetica, sans-serif;
   }
@@ -61,6 +64,7 @@ body{
       flex-direction: row;
       flex-wrap: wrap;
       align-items: center;
+      min-width: 21em;
   }
   input,select {
       border: 1px solid #808080a1;
@@ -95,6 +99,53 @@ body{
   #xdrPage .category .title{
     display: none;
   }
+  #xdrPage span.label{
+    width: 4em;
+  }
+  #xdrPage .value{
+    width: 24em;
+  }
+  #xdrPage .row{
+    min-width: 24em;
+  }
+  .xdrline {
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    display: flex;
+    flex-direction: row;
+  }
+  .xdrunused{
+    opacity: 0;
+    pointer-events: none;
+  }
+  span.xdrlabel {
+    width: 8em;
+    display: inline-block;
+  } 
+  .xdrinput .xdrdir {
+    width: 12em;
+  }
+  .xdrinput .xdrdir:before {
+    content: 'Direction';
+  }
+  .xdrinput .xdrcat {
+    width: 12em;
+  }
+  .xdrinput .xdrsel {
+    width: 12em;
+  }
+  .xdrinput .xdrfield {
+    width: 12em;
+  }
+  .xdrinput .xdrimode {
+    width: 8em;
+  }
+  .xdrinput .xdrinstance {
+    width: 4em;
+  }
+  .xdrinput .xdrname {
+    width: 16em;
+  }
   .msgDetails .value {
       width: 5em;
       text-align: right;