@@ -49,7 +49,7 @@ export const GameboardCard = (props: GameboardCardProps) => {
49
49
50
50
const card = < div className = "px-3 py-2 flex-grow-1" >
51
51
< Row data-testid = "my-assignment" >
52
- < Col md = { 8 } className = "d-flex flex-column align-items-start" >
52
+ < Col sm = { isSetAssignments ? 8 : 12 } md = { 8 } className = "d-flex flex-column align-items-start" >
53
53
< div className = "d-flex align-items-center" >
54
54
< div className = "d-flex justify-content-center board-subject-hexagon-size me-4 my-2" >
55
55
< div className = "board-subject-hexagon-container justify-content-center" >
@@ -75,13 +75,13 @@ export const GameboardCard = (props: GameboardCardProps) => {
75
75
76
76
< Spacer />
77
77
78
- { above [ 'md' ] ( deviceSize ) && < Button className = "my-2 btn-underline" color = "link" onClick = { ( e ) => { e . preventDefault ( ) ; setShowMore ( ! showMore ) ; } } >
78
+ { above [ isSetAssignments ? 'sm' : 'md' ] ( deviceSize ) && < Button className = "my-2 btn-underline" color = "link" onClick = { ( e ) => { e . preventDefault ( ) ; setShowMore ( ! showMore ) ; } } >
79
79
{ showMore ? "Hide details" : "Show details" }
80
80
</ Button > }
81
81
</ Col >
82
82
83
- < Col md = { 4 } className = "d-flex flex-column justify-content-between" >
84
- < div className = { classNames ( "d-flex flex-wrap justify-content-center justify-content-md -end" ,
83
+ < Col sm = { isSetAssignments ? 4 : 12 } md = { 4 } className = "d-flex flex-column justify-content-between" >
84
+ < div className = { classNames ( "d-flex flex-wrap justify-content-center justify-content-sm -end" ,
85
85
{ "justify-content-lg-center justify-content-xl-end column-gap-5 column-gap-md-4" : ! isSetAssignments } ,
86
86
) } >
87
87
{ ! isSetAssignments
@@ -111,15 +111,21 @@ export const GameboardCard = (props: GameboardCardProps) => {
111
111
}
112
112
</ div >
113
113
{ isSetAssignments
114
- ? < Button className = "mb-2" color = "keyline" onClick = { ( e ) => { e . preventDefault ( ) ; setAssignmentsDetails . toggleAssignModal ?.( ) ; } } >
114
+ ? above [ 'md' ] ( deviceSize ) && < Button className = "mb-2" color = "keyline" onClick = { ( e ) => { e . preventDefault ( ) ; setAssignmentsDetails . toggleAssignModal ?.( ) ; } } >
115
115
Assign{ ! isDefined ( setAssignmentsDetails . groupCount ) || setAssignmentsDetails . groupCount > 0 && " / Unassign" }
116
116
</ Button >
117
117
: boardLink && < div className = "card-share-link" >
118
118
< ShareLink linkUrl = { boardLink } gameboardId = { gameboard . id } reducedWidthLink clickAwayClose />
119
119
</ div >
120
120
}
121
121
122
- { ! above [ 'md' ] ( deviceSize ) && < Button className = "my-2 btn-underline w-max-content" color = "link" onClick = { ( e ) => { e . preventDefault ( ) ; setShowMore ( ! showMore ) ; } } >
122
+ { isSetAssignments && ! above [ 'md' ] ( deviceSize ) &&
123
+ < Button className = "mb-2" color = "keyline" onClick = { ( e ) => { e . preventDefault ( ) ; setAssignmentsDetails . toggleAssignModal ?.( ) ; } } >
124
+ Assign{ ! isDefined ( setAssignmentsDetails . groupCount ) || setAssignmentsDetails . groupCount > 0 && " / Unassign" }
125
+ </ Button >
126
+ }
127
+
128
+ { ! above [ isSetAssignments ? 'sm' : 'md' ] ( deviceSize ) && < Button className = "my-2 btn-underline w-max-content" color = "link" onClick = { ( e ) => { e . preventDefault ( ) ; setShowMore ( ! showMore ) ; } } >
123
129
{ showMore ? "Hide details" : "Show details" }
124
130
</ Button > }
125
131
</ Col >
0 commit comments