Remove editable styles

components/party/PartyHeader/index.scss

@@ -18,7 +18,9 @@
 
   .PartyDetails {
     box-sizing: border-box;
-    display: none;
+    display: block;
+    line-height: 1.4;
+    white-space: pre-wrap;
     margin: 0 auto $unit-2x;
     max-width: $unit * 94;
     overflow: hidden;
@@ -28,161 +30,6 @@
       padding: 0 $unit;
     }
 
-    &.Visible {
-      // margin-bottom: $unit-12x;
-    }
-
-    &.Editable {
-      gap: $unit;
-
-      &.Visible {
-        display: grid;
-      }
-
-      fieldset {
-        display: block;
-        width: 100%;
-
-        textarea {
-          min-height: $unit * 22;
-          width: 100%;
-        }
-      }
-
-      .SelectTrigger {
-        padding: $unit-2x;
-        width: 100%;
-      }
-
-      .DetailToggleGroup {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        gap: $unit;
-
-        @include breakpoint(phone) {
-          grid-template-columns: 1fr;
-        }
-
-        .ToggleSection,
-        .InputSection {
-          align-items: center;
-          display: flex;
-          background: var(--card-bg);
-          border-radius: $input-corner;
-
-          & > label {
-            align-items: center;
-            display: flex;
-            font-size: $font-regular;
-            gap: $unit;
-            grid-template-columns: 2fr 1fr;
-            justify-content: space-between;
-            width: 100%;
-
-            & > span {
-              flex-grow: 1;
-            }
-          }
-        }
-
-        .ToggleSection {
-          padding: ($unit * 1.5) $unit-2x;
-        }
-
-        .InputSection {
-          padding: $unit-half $unit-2x;
-          padding-right: $unit-half;
-
-          .Input {
-            border-radius: 7px;
-          }
-
-          div.Input {
-            align-items: center;
-            border: 2px solid transparent;
-            box-sizing: border-box;
-            display: flex;
-            padding: $unit;
-
-            &:has(> input:focus) {
-              border: 2px solid $blue;
-              outline: none;
-            }
-
-            & > input {
-              background: transparent;
-              border: none;
-              padding: $unit 0;
-              text-align: right;
-              width: 2rem;
-
-              &:focus {
-                outline: none;
-                border: none;
-              }
-            }
-          }
-
-          label {
-            display: flex;
-            justify-content: space-between;
-
-            span {
-              flex-grow: 1;
-            }
-
-            .Input {
-              border-radius: 7px;
-              max-width: 10rem;
-            }
-
-            div {
-              display: flex;
-              flex-direction: row;
-              gap: $unit-half;
-              justify-content: right;
-            }
-          }
-        }
-      }
-
-      .bottom {
-        display: flex;
-        flex-direction: row;
-        gap: $unit;
-
-        @include breakpoint(phone) {
-          flex-direction: column;
-          width: 100%;
-        }
-
-        .left {
-          flex-grow: 1;
-        }
-
-        .right {
-          display: flex;
-          flex-direction: row;
-          gap: $unit;
-
-          @include breakpoint(phone) {
-            .Button {
-              flex-grow: 1;
-            }
-          }
-        }
-      }
-    }
-
-    &.ReadOnly {
-      box-sizing: border-box;
-      line-height: 1.4;
-      white-space: pre-wrap;
-
-      &.Visible {
-        display: block;
-      }
-
     a:hover {
       text-decoration: underline;
     }
@@ -285,7 +132,6 @@
       }
     }
   }
-  }
 
   .PartyInfo {
     box-sizing: border-box;

components/party/PartyHeader/index.tsx

@@ -57,7 +57,6 @@ const PartyHeader = (props: Props) => {
 
   const classes = classNames({
     PartyDetails: true,
-    ReadOnly: true,
   })
 
   const userClass = classNames({