Full view vs mobile view of widget

[Alex Buliga]

Hi everyone, i'm not really experienced in html/css, but, there is a widget GRC Issues List that display a list of my reported issues.

The thing is that in the full view browser - it display's like that

The mobile view of this list is rendered very awful

the widget HTML template

<div ng-if="data.myIssues.length" class="panel panel-primary b vdp">

<div class="panel-heading vdp wide hidden-xs">
<h4>${Issues reported by you}</h4>
</div>

<div class="panel-body vdp" role="grid" aria-readonly="true" style="padding-top: 5px;">

<div class="header" role="row">
<div class="col-sm-1 cell">${Number}</div>
<div class="col-sm-3 cell">${Entity}</div>
<div class="col-sm-6 cell">${Control Objective}</div>
<div class="col-sm-1 cell">${State}</div>
<div class="col-sm-1 cell flex-right">${}</div>
</div>

<div ng-repeat="iss in data.myIssues" class="contact-row" role="row">
<div class="col-sm-1 cell">{{::iss.number}}</div>
<div class="col-sm-3 cell">{{::iss.profile}}</div>
<div class="col-sm-6 cell">{{::iss.content}}</div>
<div class="col-sm-1 cell">{{::iss.state}}</div>
<div class="col-sm-1 cell flex-right">
<a ng-href="?id=issue&table=sn_grc_issue&sys_id={{iss.sys_id}}" role="button" class="btn btn-default">
${View}
</a>
</div>
</div>

</div>
</div>

the CSS is

.alert {
    margin-top: 20px;
}

.b {
    margin-top: 15px;
}

.panel-heading {
		padding: 10px 0 5px 40px;
}

.panel-body {
    padding: 40px;
}

.panel-body {
    padding: 15px;
    padding-bottom: 40px;
}

.label.upper-case {
 	text-transform: uppercase; 
}

.cell {
  	display: flex;
		align-items: center;
		border-bottom: 1px solid #dee5e7;
  	height: 70px;
  	padding: 0;
	overflow: hidden;
	word-break: break-word;
}

.th .cell {
	 	padding-bottom: 10px;
    align-items: flex-end; 
  	height: 60px;
}

.header .cell {
	font-weight: 700;
}

.contact-row:hover .cell {
  	background-color: $list-group-hover-bg;
}

.cell.flex-right {
 		justify-content: flex-end; 
		padding-right: 0rem; 
}

.first-cell {
	  padding-left: 10px;
}

a#new_contact:hover, 
a#new_contact:hover i,
.panel.vdp .contact-row a:hover{
    color: $brand-primary;
}

.contact-row .label.upper-case {
	  padding: .3em .6em .2em;
  	margin-left: 4px;
}

.contact-row:hover > div {
    background-color: $breadcrumb-bg!important;
}

.label-primary,
.label-warning {
  min-width: 75px;
}

.label-primary {
    color: $label-color;
  	background-color: $brand-success
}

.label-warning {
    background-color: $label-warning-bg;
  	color: $label-color;
}

As i understand there isnt CSS for mobile view, smth like that, using the col-sm-12

@media (max-width: 767px)

.col-sm-12 {
 
}

[Alex Buliga]

topic up