Add functional QWord ribbon tabs

src/styles.css

@@ -679,6 +679,26 @@ button {
   grid-template-columns: minmax(0, 1fr);
 }
 
+.word-view-group {
+  flex: 0 0 320px;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.word-view-mode-row {
+  display: flex;
+  align-items: start;
+  gap: 6px;
+  min-width: 0;
+}
+
+.word-view-mode-row .compact-command {
+  flex: 1 1 0;
+  height: 58px;
+  flex-direction: column;
+  gap: 4px;
+  white-space: normal;
+}
+
 .word-edit-group .toolbar-status {
   min-height: 26px;
   padding: 0;
@@ -1006,6 +1026,36 @@ button {
   outline: 0;
 }
 
+.qword-view-read .page-ruler,
+.qword-view-read .vertical-page-ruler,
+.qword-view-web .page-ruler,
+.qword-view-web .vertical-page-ruler {
+  display: none;
+}
+
+.qword-view-read .paper-frame {
+  width: min(920px, calc(100% - 96px));
+  margin-top: 34px;
+}
+
+.qword-view-read .paper {
+  min-height: auto;
+  padding: 56px 72px;
+}
+
+.qword-view-web .paper-frame {
+  width: min(1040px, calc(100% - 64px));
+  margin-top: 24px;
+}
+
+.qword-view-web .paper {
+  min-height: auto;
+  padding: 36px 48px;
+  border-right: 0;
+  border-left: 0;
+  box-shadow: none;
+}
+
 .page-break-guides {
   position: absolute;
   inset: 0;